:root {
  --bg: #12161F;
  --panel: #1B2130;
  --panel-2: #232C42;
  --line: #2A3245;
  --line-2: #4A5470;
  --text: #E9ECF2;
  --muted: #9AA3B5;
  --soft: #C3CAD8;
  --gold: #E3B04B;
  --gold-2: #F3CB72;
  --red: #E05A4F;
  --green: #6FD49A;
  --green-2: #3BB273;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--gold); }
a:hover { color: var(--gold-2); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.side-col { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel h2 { margin: 0 0 12px; font-size: 17px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- header ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-logo { width: 48px; height: 48px; border-radius: 12px; background: var(--bg); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; flex: none; }
.brand h1 { margin: 0; font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 24px; line-height: 1.2; color: var(--gold); }
.brand small { display: block; color: var(--muted); font-size: 13px; }
.user-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.btn { white-space: nowrap; }

/* ---------- buttons & inputs ---------- */
.btn { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover:not(:disabled) { border-color: var(--soft); }
.btn-gold { background: var(--gold); color: #12161F; border-color: var(--gold); font-weight: 700; }
.btn-gold:hover:not(:disabled) { background: var(--gold-2); border-color: var(--gold-2); }
.btn-outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-red { background: var(--red); color: #12161F; border-color: var(--red); font-weight: 700; }
.btn-green { background: var(--green-2); color: #0B0E14; border-color: var(--green-2); font-weight: 700; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--line); }
.btn-lg { min-height: 52px; font-size: 16px; padding: 0 26px; border-radius: 12px; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: var(--muted); }
.input { min-height: 46px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); padding: 0 12px; font-size: 16px; width: 100%; }
.input:focus { border-color: var(--gold); outline: none; }
.input.code { letter-spacing: 3px; text-transform: uppercase; direction: ltr; text-align: center; font-weight: 700; }
.ltr { direction: ltr; text-align: left; }

/* ---------- avatars ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #12161F; flex: none; font-size: 16px; position: relative; }
.avatar.sm { width: 30px; height: 30px; font-size: 13px; }
.avatar.lg { width: 48px; height: 48px; font-size: 19px; }
.avatar .dot { position: absolute; bottom: -1px; left: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel); background: var(--muted); }
.avatar .dot.on { background: var(--green-2); }

.badge { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 6px; background: var(--gold); color: #12161F; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--bg); border-radius: 6px; padding: 2px 8px; color: var(--muted); }

/* ---------- auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-card .brand { justify-content: center; text-align: center; flex-direction: column; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg); padding: 4px; border-radius: 12px; }
.tabs button { min-height: 42px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] { background: var(--panel-2); color: var(--text); }
.colors { display: flex; flex-wrap: wrap; gap: 8px; }
.color-opt { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.color-opt[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }
.form-error { color: #FF8A80; font-size: 14px; min-height: 0; }

/* ---------- home ---------- */
.join-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.join-bar .grow { flex: 1 1 220px; }
.join-bar form { display: flex; gap: 8px; align-items: center; }
.join-bar .input.code { width: 130px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.game-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.game-art { height: 170px; position: relative; }
.game-art svg { width: 100%; height: 100%; display: block; }
.game-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.game-body h3 { margin: 0; font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 22px; }
.game-body p { margin: 0; font-size: 14px; color: var(--soft); }
.game-body .btn { margin-top: auto; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.list { display: flex; flex-direction: column; gap: 4px; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.list-item .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list-item .who > span:last-child { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.list-item .name { font-weight: 600; font-size: 14px; }
.list-item .sub { font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; padding: 8px 4px; }

/* ---------- room ---------- */
.room-code { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px dashed var(--line-2); border-radius: 12px; padding: 6px 12px; }
.room-code strong { font-size: 22px; letter-spacing: 4px; direction: ltr; }
.member { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.member .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.member .state { font-size: 12px; font-weight: 700; }
.member .state.ready { color: var(--green); }
.member .state.wait { color: var(--gold); }
.member.me { border-color: var(--line-2); }
.slot-empty { padding: 9px 10px; border-radius: 10px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }

.game-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.game-opt { text-align: right; display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); border: 2px solid var(--line); color: var(--text); }
.game-opt[aria-pressed="true"] { background: var(--panel-2); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227,176,75,.15); }
.game-opt .ico { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.game-opt strong { display: block; font-size: 16px; color: var(--text); }
.game-opt small { display: block; font-size: 12px; color: var(--muted); }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--gold); color: #12161F; border-color: var(--gold); font-weight: 700; }
.settings { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.settings .field > span { margin-bottom: 2px; }

.start-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.start-bar .hint { flex: 1 1 200px; font-size: 13px; color: var(--muted); }

.chat { display: flex; flex-direction: column; height: 460px; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 8px; }
.msg { align-self: flex-start; max-width: 88%; background: var(--bg); border-radius: 12px 12px 12px 4px; padding: 6px 10px; font-size: 14px; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: #2A3550; border-radius: 12px 12px 4px 12px; }
.msg .from { font-weight: 700; margin-inline-end: 4px; }
.msg.system { align-self: center; background: transparent; color: var(--muted); font-size: 12px; padding: 2px 6px; text-align: center; }
.chat-form { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chat-form .input { min-height: 44px; }

.playing { text-align: center; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.playing h2 { font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 26px; color: var(--gold); margin: 0; }

/* ---------- friends & map preview ---------- */
.friend-btn { width: 100%; border: 1px solid transparent; background: transparent; color: var(--text); text-align: right; }
.friend-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--line); }
.map-preview { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.map-art { flex: 3 1 320px; min-width: 0; border-radius: 10px; overflow: hidden; background: #161D2A; }
.map-art svg { width: 100%; height: auto; max-height: 420px; display: block; }
.map-info { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.map-info strong { font-size: 20px; font-family: 'Reem Kufi', 'Cairo', sans-serif; color: var(--gold); }
.map-info > span { color: var(--soft); font-size: 14px; }
.toast.invite { border-color: var(--gold); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; }

/* ---------- misc ---------- */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-weight: 600; font-size: 14px; animation: rise .25s ease-out; pointer-events: auto; }
.toast.error { border-color: var(--red); color: #FFB4AE; }
.toast.ok { border-color: var(--green-2); color: var(--green); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .room-row > .side-col { display: contents; }
  .room-row > *, .room-row .room-members, .room-row .room-friends, .room-row .chat { flex: 1 1 100%; min-width: 0; }
  .room-members { order: 1; }
  .room-row > .main-col { order: 2; }
  .room-row .room-friends { order: 3; }
  .room-row .chat { order: 4; }
}

@media (max-width: 640px) {
  .hide-sm { display: none; }
  .brand small { display: none; }
  .topbar { justify-content: center; }
  .room-code strong { font-size: 18px; letter-spacing: 3px; }
  .page { padding: 10px; gap: 12px; }
  .brand h1 { font-size: 20px; }
  .brand-logo { width: 40px; height: 40px; }
  .chat { height: 380px; }
  .topbar { padding: 10px 12px; }
}

/* =================== اللعب =================== */
.room-row.is-playing > .main-col { flex: 999 1 640px; }
@media (max-width: 900px) {
  .room-row.is-playing > .main-col { order: 0; }
}
.tsec-title { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.clock { min-width: 64px; text-align: center; background: var(--bg); border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.clock:empty { display: none; }
.clock.urgent { border-color: var(--red); color: #FF8A80; animation: pulse 1s infinite; }
.clock.big { font-size: 26px; padding: 6px 18px; }
@keyframes pulse { 50% { opacity: .55; } }
.seg button.soon { opacity: .75; border-style: dashed; }
.seg button.soon small { font-size: 11px; color: var(--gold); }

/* ---- القطارات ---- */
.tgame { display: flex; flex-direction: column; gap: 12px; }
.tstatus { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; }
.tturn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tturn-txt { display: flex; flex-direction: column; line-height: 1.35; }
.tturn-txt b { font-size: 17px; }
.tturn-txt b.yourturn { color: var(--gold); }
.tturn-txt small { color: var(--muted); font-size: 13px; }
.tphase { font-weight: 700; color: var(--gold); margin-inline-end: 8px; }
.tstatus-right { display: flex; align-items: center; gap: 8px; }
.tcounts { display: flex; gap: 6px; }
.tbanner { background: #3A1E24; border: 1px solid var(--red); color: #FFB4AE; border-radius: 12px; padding: 8px 14px; font-weight: 700; text-align: center; }
.tboard { padding: 6px; }
.board-svg { width: 100%; height: auto; display: block; border-radius: 10px; max-height: 78vh; }
.board-svg .route.free { cursor: pointer; }
.board-svg .route.free:hover rect:not(.hit) { filter: brightness(1.25); }
.tmarket { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tmarket .tsec-title { margin: 0; }
.tmarket-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tslot { padding: 0; border: none; background: none; border-radius: 10px; }
.tslot:not(:disabled):hover .tcard { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold); }
.tslot:disabled { opacity: .55; }
.tslot.empty { width: 52px; height: 72px; border: 2px dashed var(--line); border-radius: 10px; display: inline-block; }
.tdeck { width: 56px; height: 76px; border-radius: 10px; border: 2px dashed var(--line-2); background: var(--bg); color: var(--text); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tdeck small { font-size: 11px; color: var(--muted); font-weight: 400; }
.tdeck:not(:disabled):hover { border-color: var(--gold); }
.tmarket #tTickets { margin-inline-start: auto; }
.tcard { position: relative; width: 44px; height: 62px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s; flex: none; vertical-align: middle; }
.tcard.loco { background: repeating-linear-gradient(135deg, #E05A4F 0 8px, #E8C547 8px 16px, #4BB37A 16px 24px, #3E8ED0 24px 32px, #9B6BD3 32px 40px); }
.tcard.lg { width: 52px; height: 72px; }
.tcard.sm { width: 30px; height: 42px; border-radius: 6px; }
.tcard.sm svg { width: 14px; height: 14px; }
.tcard.xs { width: 18px; height: 26px; border-radius: 4px; }
.tcard.xs svg { display: none; }
.tcount { position: absolute; top: -8px; left: -8px; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); font-size: 12px; border-radius: 999px; min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.thand-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.thand-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.ttickets { display: flex; flex-direction: column; gap: 6px; }
.ticket { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.ticket.done { border-color: var(--green-2); }
.ticket.fail { border-color: #6B2E2E; }
.tk-r { display: flex; align-items: center; gap: 8px; }
.tk-pts { background: var(--gold); color: #12161F; border-radius: 8px; padding: 0 8px; font-size: 14px; }
.tk-ok { color: var(--green); font-size: 13px; }
.tk-bad { color: #FF8A80; font-size: 13px; }
.tplayer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; }
.tplayer.turn { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--gold); }
.tplayer .who { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 14px; }
.tstats { display: flex; gap: 10px; font-size: 13px; color: var(--soft); white-space: nowrap; }
.tstats b { color: var(--gold); }
.logline { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--soft); }
.logline:last-child { border-bottom: none; }
.logline .plus { color: var(--green); }
.claim-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.claim-info > span:last-child { margin-inline-start: 8px; }
.pay-opt, .ticket-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--bg); color: var(--text); font-weight: 600; text-align: right; }
.pay-opt:hover:not(:disabled) { border-color: var(--gold); }
.pay-cards { display: flex; gap: 10px; }
.ticket-opt[aria-pressed="true"] { border-color: var(--gold); background: var(--panel-2); }
.ticket-opt[aria-pressed="false"] { opacity: .6; }
.tk-map { margin-top: 10px; border-radius: 10px; overflow: hidden; }
.tk-map .board-svg { max-height: 260px; }
.winner { text-align: center; font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 12px; font-family: 'Reem Kufi', 'Cairo', sans-serif; display: flex; flex-direction: column; gap: 4px; }
.winner small { font-family: 'Cairo', sans-serif; font-size: 13px; color: var(--soft); font-weight: 600; }
.results { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.result { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.result summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.result summary::-webkit-details-marker { display: none; }
.result .rank, .tv-row .rank { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.result .name { flex: 1; font-weight: 700; }
.result .total { font-size: 20px; color: var(--gold); }
.rbreak { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin: 10px 0 8px; color: var(--soft); }

/* ---- الشيت (اللوحات من تحت) ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5,7,12,.6); animation: fadein .18s; }
.sheet { position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-bottom: none; border-radius: 20px 20px 0 0; padding: 8px 18px 22px; animation: slideup .22s ease-out; transition: transform .15s; }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 4px auto 6px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sheet-head h2 { margin: 0; font-size: 18px; }
.sheet-wrap.closing .sheet { transform: translateY(100%); transition: transform .18s; }
.sheet-wrap.closing .sheet-backdrop { opacity: 0; transition: opacity .18s; }
@keyframes slideup { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fadein { from { opacity: 0; } }
.tv-link { direction: ltr; text-align: left; background: var(--bg); border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }

/* ---- تحسين المهارات: هادئ ومو ملفت ---- */
.sheet-skills .sheet { background: #161B26; }
.skill-grid { display: flex; flex-direction: column; gap: 8px; }
.skill { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.skill b { display: block; font-size: 15px; }
.skill small { display: block; color: var(--muted); font-size: 12px; }
.skill-out { font-size: 13px; display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.skill-out:empty { display: none; }
.hawk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toggle { width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); position: relative; flex: none; padding: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: right .18s, background .18s; }
.toggle[aria-pressed="true"] { background: #3B3220; border-color: var(--gold); }
.toggle[aria-pressed="true"]::after { right: 25px; background: var(--gold); }

/* ---- المافيا ---- */
.mgame { display: flex; flex-direction: column; gap: 12px; }
.mhead { display: flex; align-items: center; gap: 12px; }
.mhead.night { background: #0E1120; border-color: #262B45; }
.mhead.finished { border-color: var(--gold); }
.mhead-ico { display: flex; }
.mhead-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.mhead-txt b { font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 22px; }
.mhead-txt small { color: var(--muted); font-size: 13px; }
.role-chip { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; color: var(--text); text-align: right; padding: 0; }
.role-chip > span { display: flex; flex-direction: column; gap: 2px; }
.role-chip b { font-size: 20px; }
.role-chip small { color: var(--soft); font-size: 13px; }
.role-hidden { color: var(--muted); font-weight: 600; padding: 6px 0; }
.dead-note { margin-top: 10px; color: var(--muted); font-size: 14px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mplayer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; min-height: 104px; border-radius: 14px; background: var(--bg); border: 2px solid var(--line); color: var(--text); position: relative; }
.mplayer:not(:disabled):hover { border-color: var(--line-2); }
.mplayer:disabled { opacity: 1; cursor: default; }
.mplayer.sel { border-color: var(--red); background: #2A1418; }
.mplayer.dead { opacity: .45; filter: grayscale(.8); }
.mplayer.dead .mname { text-decoration: line-through; }
.mname { font-weight: 600; font-size: 14px; }
.mtag { font-size: 12px; font-weight: 700; }
.mvotes { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.mvotes i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bg); display: inline-block; }
.mvotes b { font-size: 12px; margin-inline-start: 4px; color: var(--gold); }
.mprompt { margin: 0 0 10px; font-weight: 600; }
.mcenter { text-align: center; padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sleep { font-size: 48px; }
.mnews { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-2); margin-bottom: 12px; }
.mnews.bad { border-color: var(--red); }
.mnews.good { border-color: var(--green-2); }
.mnews > span { display: flex; flex-direction: column; line-height: 1.4; }
.mnews b { font-size: 18px; }
.mnews small { color: var(--muted); }
.mwinner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border-radius: 16px; margin-bottom: 12px; background: var(--bg); border: 2px solid var(--gold); text-align: center; }
.mwinner b { font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 28px; color: var(--gold); }
.mwinner.mafia { border-color: var(--red); }
.mwinner.mafia b { color: var(--red); }
.mteam { border-color: #4A2228; background: #1A1216; }
.mteam-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
#mSkip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

/* =================== شاشة العرض =================== */
body.tv-mode { overflow: hidden; }
.tv { height: 100vh; display: flex; flex-direction: column; padding: 18px 24px; gap: 14px; }
.tv-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tv-top .brand h1 { font-size: 28px; }
.tv-join { font-size: 18px; color: var(--soft); }
.tv-join b { color: var(--gold); letter-spacing: 4px; font-size: 26px; }
.tv-main { flex: 1; min-height: 0; }
.tv-lobby { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.tv-lobby h2 { font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 52px; color: var(--gold); margin: 0; }
.tv-lobby p { font-size: 22px; color: var(--soft); margin: 0; }
.tv-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 14px; }
.tv-p { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 18px; }
.tv-p .avatar.lg, .tv-m .avatar.lg { width: 72px; height: 72px; font-size: 28px; }
.tv-trains { height: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 18px; }
.tv-board { min-height: 0; display: flex; align-items: center; justify-content: center; background: #161D2A; border-radius: 18px; padding: 8px; }
.tv-board .board-svg { max-height: calc(100vh - 140px); width: auto; max-width: 100%; }
.tv-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.tv-turn { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; font-size: 24px; }
.tv-turn b { flex: 1; }
.tv-score, .tv-results { display: flex; flex-direction: column; gap: 6px; }
.tv-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 19px; }
.tv-row.turn { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,176,75,.15); }
.tv-row .name { flex: 1; font-weight: 700; }
.tv-stats { display: flex; gap: 14px; align-items: center; font-size: 17px; color: var(--soft); }
.tv-stats b { color: var(--gold); font-size: 21px; }
.tv-market { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 16px; padding: 12px 16px; }
.tv-log { background: var(--panel); border-radius: 16px; padding: 10px 16px; }
.tv-log .logline { font-size: 16px; }
.tv-mafia { height: 100%; display: flex; flex-direction: column; gap: 18px; padding: 10px; border-radius: 22px; transition: background .6s; }
.tv-mafia.night, .tv-mafia.reveal { background: radial-gradient(ellipse at top, #1A1F3A, #0A0D18 70%); }
.tv-mafia.day, .tv-mafia.vote { background: radial-gradient(ellipse at top, #2E2A1E, #12161F 70%); }
.tv-phase { display: flex; align-items: center; gap: 18px; padding: 8px 12px; }
.tv-phase .tv-ico svg { width: 64px; height: 64px; }
.tv-phase div { flex: 1; }
.tv-phase h2 { font-family: 'Reem Kufi', 'Cairo', sans-serif; font-size: 52px; margin: 0; line-height: 1.1; }
.tv-phase p { font-size: 22px; color: var(--soft); margin: 0; }
.tv-news { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 28px; padding: 16px; border-radius: 18px; background: rgba(18,22,31,.75); border: 2px solid var(--line-2); text-align: center; }
.tv-news.bad { border-color: var(--red); }
.tv-news.good { border-color: var(--green-2); }
.tv-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; align-content: start; flex: 1; }
.tv-m { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; background: rgba(18,22,31,.8); border: 1px solid var(--line); font-size: 19px; }
.tv-m.dead { opacity: .4; filter: grayscale(.8); }
.tv-m.dead b { text-decoration: line-through; }
.tv-vbar { width: 90%; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.tv-vbar i { display: block; height: 100%; background: var(--gold); transition: width .4s; }
@media (max-width: 1000px) {
  body.tv-mode { overflow: auto; }
  .tv { height: auto; min-height: 100vh; padding: 12px; }
  .tv-trains { grid-template-columns: 1fr; }
  .tv-phase h2 { font-size: 34px; }
}

/* ---- ربط التلفزيون ---- */
.tv-pair { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.tv-pair-lead { font-size: 30px; margin: 0; }
.tv-pair-lead b { color: var(--gold); }
.tv-code { display: flex; gap: 18px; direction: ltr; min-height: 170px; align-items: center; }
.tv-code span { width: 130px; height: 160px; border-radius: 22px; background: var(--panel); border: 3px solid var(--gold); color: var(--gold); font-size: 104px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Reem Kufi', 'Cairo', sans-serif; }
.tv-pair-tip { font-size: 20px; color: var(--soft); }
.tv-pair-tip b { color: var(--text); }
.tv-err { font-size: 22px; color: #FFB4AE; }
.tv-pair-form { display: flex; gap: 10px; align-items: center; }
.tv-pair-form .input.code { width: 160px; font-size: 26px; min-height: 56px; }
.tv-addr { color: var(--gold); }
.tv-adv { margin-top: 10px; }
.tv-adv summary { cursor: pointer; }
.tv-join .btn { margin-inline-start: 10px; }
@media (max-width: 700px) {
  .tv-code span { width: 64px; height: 84px; font-size: 52px; }
  .tv-pair-lead { font-size: 20px; }
}

/* ---- وضوح القطارات المحجوزة ---- */
.board-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; padding: 8px 6px 4px; }
.board-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.board-legend .lg i { font-style: normal; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #0B0E14; font-size: 12px; font-weight: 700; border: 2px solid #fff; }
.board-legend .lg small { color: var(--muted); font-weight: 400; }
.board-svg .last-claim { animation: claimPulse 1.4s ease-in-out infinite; }
@keyframes claimPulse { 50% { opacity: .2; } }
.board-svg .owner-badge { pointer-events: none; }
.tv-board { flex-direction: column; }
.tv-board .board-legend .lg { font-size: 17px; }
.tv-board .board-legend .lg i { min-width: 28px; height: 28px; font-size: 15px; }