/* نظام التصميم للموقع كله: الألوان والخطوط والهيكل المشترك */
:root {
  --night: #04121c;
  --felt: rgba(255, 255, 255, .06);
  --felt-2: rgba(255, 255, 255, .11);
  --line: rgba(255, 255, 255, .13);
  --gold: #e9b44c;
  --gold-soft: rgba(233, 180, 76, .16);
  --ink: #f7f4ec;
  --muted: #a9bcc6;
  --display: 'Alexandria', 'Readex Pro', system-ui, sans-serif;
  --body: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* نفس جو الخلفية الحية، ويبقى لو الجهاز ما شغّلها */
html {
  background: radial-gradient(120% 90% at 50% -8%, #0c4258 0, #06283a 38%, #03121e 72%, #020a12 100%) fixed var(--night);
  scroll-behavior: smooth;
}
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--body); font-weight: 400; line-height: 1.6; background: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* بدون هذا السطر، خانة الكتابة تقص نقاط الحروف من تحت، فتبان «علي» مثل «على» */
input, textarea { line-height: 1.7; }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0; }
h1 em, h2 em { font-style: normal; color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* الخلفية الحية ثابتة ورا كل الصفحة */
.scene3d { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ===== الشريط العلوي: بدون خطوط، يذوب في الخلفية ===== */
.site-bar { position: sticky; top: 0; z-index: 10; background: linear-gradient(to bottom, rgba(4, 18, 28, .85), rgba(4, 18, 28, 0)); backdrop-filter: blur(6px); }
.site-bar-inner {
  max-width: 1280px; margin-inline: auto; padding: 16px clamp(18px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; white-space: nowrap; }
.logo-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #f6cf7b, #d9932c); color: #2c1f05; font-weight: 700; font-size: 17px;
}
.site-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; color: #d6e2e8; }
.site-nav a { text-decoration: none; transition: color .2s; }
.site-nav a:hover { color: var(--gold); }
.online-now { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; anchor-name: --online-button; transition: color .2s; }
.online-now[hidden] { display: none; }
.online-now:hover { color: #4ade80; }
.online-now:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.online-caret { font-size: 11px; opacity: .75; }
/* قائمة المتصلين: تنزل تحت الزر مباشرة */
.online-panel {
  position: fixed; inset: 70px auto auto 50%; transform: translateX(-50%); width: min(280px, calc(100vw - 24px)); max-height: min(60vh, 420px); margin: 0; padding: 10px; overflow-y: auto;
  border: 0; border-radius: 14px; background: #0b2a3c; color: var(--ink); box-shadow: 0 16px 42px rgba(0, 0, 0, .55); text-align: start; font-size: 14px;
}
.online-panel:not(:popover-open):not(.is-open) { display: none; }
@supports (anchor-name: --online-button) {
  .online-panel { position-anchor: --online-button; inset: anchor(bottom) 0 auto 0; transform: none; justify-self: anchor-center; margin-top: 10px; }
}
.online-title { margin: 2px 4px 8px; color: #7df0e8; font-size: 13px; font-weight: 700; }
.online-panel ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.online-panel li { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 9px; }
.online-panel .rank-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.online-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.online-panel small { flex: none; color: #2dd4bf; font-size: 12px; font-weight: 700; }
.online-panel small.online-admin { color: #ff7b7b; }
.online-admins { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 6px; color: #a01414; font-weight: 700; }
.online-admins[hidden] { display: none; }
/* عرض صاحب الموقع: الجوال يكتب السطرين فوق بعض عشان الكلمتين يبانون */
@media (max-width: 620px) {
  .site-nav .online-now.owner-view { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; column-gap: 4px; font-size: 11px; line-height: 1.25; white-space: nowrap; }
  .site-nav .online-now.owner-view .wide-only { display: inline; }
  .site-bar .site-nav .online-now.owner-view { padding-block: 1px; }
  .online-now.owner-view .online-admins { grid-column: 1 / -1; margin: 0; gap: 4px; }
  .online-now.owner-view i { width: 7px; height: 7px; }
}
@media (max-width: 340px) { .online-now.owner-view i { display: none; } .site-nav:has(.owner-view) .copy-link { display: none; } }
.online-notes { margin: 6px 4px 2px; color: #b9c8d0; font-size: 12px; }
.online-notes[hidden] { display: none; }
/* الجوالات الصغيرة: نخلي السطر العلوي يكفي */
@media (max-width: 480px) { .online-caret { display: none; } }
@media (max-width: 380px) {
  .site-bar-inner .site-nav { gap: 7px; font-size: 12px; }
  .site-bar-inner .logo { gap: 4px; font-size: 14px; }
}
.online-now i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: online-pulse 2s infinite; }
.online-now b { font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; }
@keyframes online-pulse { 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .online-now i { animation: none; } }
.copy-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; transition: color .2s; }
.copy-link:hover { color: var(--gold); }
.copy-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 480px) {
  .site-bar-inner { gap: 8px; padding-inline: 12px; }
  .site-nav { gap: 10px; font-size: 13px; white-space: nowrap; }
  .logo { font-size: 15px; gap: 6px; }
}

/* ===== زر الادمن ولوحته ===== */
.bar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-open { padding: 4px 9px; border: 1px solid rgba(44, 31, 5, .45); border-radius: 7px; background: none; color: #2c1f05; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.admin-open:hover { background: #2c1f05; color: #f6cf7b; }
.admin-open:focus-visible { outline: 2px solid #2c1f05; outline-offset: 2px; }
/* الجوال ما يكفي للاسم والزر والقائمة مع بعض، فيبقى شعار الحرف */
@media (max-width: 440px) { .bar-start { gap: 6px; } .logo-text { display: none; } .admin-open { padding: 3px 6px; font-size: 12px; } }
.admin-dialog { width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: #0b2a3c; color: var(--ink); }
.admin-dialog::backdrop { background: rgba(2, 12, 20, .72); backdrop-filter: blur(4px); }
.admin-dialog h2 { margin: 0 0 14px; font-size: 21px; text-align: center; }
.admin-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.admin-step[hidden] { display: none; }
.admin-step p { margin: 0; line-height: 1.6; }
.admin-step label[for] { font-size: 14px; color: #c7d8df; }
.admin-step input[type="password"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--ink); font: inherit; font-size: 18px; text-align: center; letter-spacing: .15em; }
.admin-step fieldset { margin: 0; padding: 0; border: 0; }
.admin-step legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.admin-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.admin-games label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; padding: 5px 4px; border: 1px solid rgba(233, 180, 76, .4); border-radius: 10px; background: rgba(233, 180, 76, .1); color: #f6cf7b; text-align: center; cursor: pointer; }
.admin-games label:has(input:checked) { border-color: var(--gold); background: var(--gold); color: #2c1f05; }
.admin-games label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 1px; }
.admin-games input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.admin-games span { font-size: 13px; font-weight: 700; line-height: 1.25; }
.admin-games small { color: #c7d8df; font-size: 11px; }
.admin-games label:has(input:checked) small { color: #2c1f05; }
.btn.admin-danger { background: #c0392b; color: #fff; }
.btn.admin-danger:hover { background: #d64533; }
.admin-msg { min-height: 1.5em; margin: 10px 0 0; color: #ffd9a0; font-size: 14px; text-align: center; }
.admin-room { width: 100%; margin-bottom: 14px; }
.admin-codes { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-codes h3 { font-size: 17px; }
.admin-codes p:not(.admin-msg) { color: #c7d8df; font-size: 13px; }
.admin-code-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.admin-code-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.admin-code-list b { direction: ltr; font-weight: 600; }
.admin-code-list li { flex-wrap: wrap; }
.admin-code-who { display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.admin-code-name { overflow-wrap: anywhere; font-weight: 700; text-align: start; }
.admin-code-actions { display: flex; flex: 1 1 100%; gap: 8px; padding-bottom: 8px; }
.admin-code-actions[hidden], .admin-code-edit[hidden] { display: none; }
.admin-code-actions button { flex: 1; min-height: 40px; }
.admin-edit { padding: 2px 12px; border: 0; border-radius: 8px; background: var(--gold); color: #2c1f05; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.admin-code-edit { display: grid; flex: 1 1 100%; gap: 8px; padding-bottom: 8px; }
.admin-code-edit input { box-sizing: border-box; width: 100%; min-height: 42px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--ink); font: inherit; text-align: center; }
.admin-code-edit input::placeholder { color: #b9c8d0; }
.admin-codes .admin-code-edit p { margin: 0; font-size: 12px; }
.admin-remove { min-height: 34px; padding: 2px 12px; border: 0; border-radius: 8px; background: rgba(192, 57, 43, .85); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.admin-add { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-add input { flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--ink); font: inherit; text-align: center; }
.admin-add input::placeholder { color: #b9c8d0; }
.admin-add input { flex-basis: calc(50% - 4px); font-size: 14px; }
.admin-add .btn { flex: 1 1 100%; }
/* أكواد الادمن: مربعات صغيرة، والمربع المفتوح ياخذ الصف كامل */
#adminCodeList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#adminCodeList li { display: block; min-height: 0; padding: 0; border: 1px solid rgba(233, 180, 76, .4); border-radius: 10px; background: rgba(233, 180, 76, .1); }
#adminCodeList li:has(> .admin-code-actions:not([hidden])), #adminCodeList li:has(> .admin-code-edit:not([hidden])) { grid-column: 1 / -1; padding: 0 8px; }
#adminCodeList li:not(:has(.admin-code-who)) { grid-column: 1 / -1; padding: 10px; text-align: center; }
#adminCodeList .admin-code-who { flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 60px; padding: 5px 4px; color: #f6cf7b; }
#adminCodeList .admin-code-name { font-size: 13px; line-height: 1.25; text-align: center; }
#adminCodeList .admin-code-who b { color: #c7d8df; font-size: 11px; font-weight: 500; }

/* ===== الأزرار ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 12px; border: 0;
  background: var(--felt-2); color: var(--ink); backdrop-filter: blur(8px);
  font-family: var(--body); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: rgba(255, 255, 255, .19); transform: translateY(-2px); }
.btn.primary { background: linear-gradient(135deg, #f6cf7b, #e0a23a); color: #2c1f05; box-shadow: 0 10px 26px rgba(224, 162, 58, .28); }
.btn.primary:hover { box-shadow: 0 14px 34px rgba(224, 162, 58, .42); }

/* ===== الواجهة ===== */
.home { max-width: 1280px; margin-inline: auto; padding: 0 clamp(18px, 5vw, 64px) 64px; overflow-x: clip; }
.hero { position: relative; display: flex; align-items: center; min-height: min(74vh, 660px); padding-block: clamp(36px, 8vh, 80px); isolation: isolate; }
/* صورة بدون إطار: أطرافها تذوب في الخلفية */
.hero-art {
  position: absolute; z-index: -1; inset-block: -6%; inset-inline-end: -8%; width: 68%; height: 112%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 48%, transparent 100%);
}
.hero-text { max-width: 620px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 88px); font-weight: 800; line-height: 1.14; margin-bottom: 16px; text-shadow: 0 6px 30px rgba(2, 12, 20, .55); }
.hero .line { display: block; }
.hero h1 em { background: linear-gradient(90deg, #f6cf7b, #e9b44c 45%, #7df0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 42ch; margin: 0; color: #dbe8ed; font-size: clamp(16px, 1.7vw, 20px); text-shadow: 0 2px 14px rgba(2, 12, 20, .7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* كود الغرفة: في نص الصفحة، ويطلع مع أول شاشة */
.room-entry { position: relative; z-index: 1; margin-top: 12px; text-align: center; }
.room-entry h2 { margin-bottom: 10px; color: var(--gold); font-size: clamp(22px, 3vw, 30px); font-weight: 700; text-shadow: 0 2px 14px rgba(2, 12, 20, .7); }
.room-entry form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.room-entry input {
  flex: 1 1 200px; max-width: 300px; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px; text-align: center;
  background: var(--felt-2); color: var(--ink); font-family: var(--body); font-size: 18px; backdrop-filter: blur(8px);
}
.room-entry input::placeholder { color: #b9c8d0; font-size: 15px; }
.room-entry .btn { min-height: 48px; }
@media (max-width: 620px) { .room-entry { margin-top: 28px; } .room-entry .btn { min-width: 170px; } }
#games { padding-top: clamp(28px, 5vh, 44px); }
.section-title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; margin-bottom: clamp(18px, 3vh, 28px); }

/* ===== التصفية ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  padding: 8px 18px; border: 0; border-radius: 99px; background: var(--felt); backdrop-filter: blur(8px);
  color: #d6e2e8; font-family: var(--body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s;
}
.chip:hover { background: var(--felt-2); }
.chip[aria-pressed="true"] { background: var(--gold); color: #2c1f05; }

/* ===== الألعاب: شبكة مربعات، 4 في كل صف على الشاشات العريضة ===== */
.games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); perspective: 1000px; }
.game {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px;
  background: #0b2230; box-shadow: 0 26px 60px rgba(0, 0, 0, .55); transform-style: preserve-3d;
}
.game-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.game:hover .game-cover { transform: scale(1.05); }
.game::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(2, 8, 14, .95) 4%, rgba(2, 8, 14, .35) 46%, rgba(2, 8, 14, 0) 70%); }
/* الرابط الرئيسي يغطي الغلاف كله */
.game-link { position: absolute; inset: 0; z-index: 2; border-radius: 20px; }
.game-link:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.game-info {
  position: absolute; z-index: 3; inset: auto 12px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  transform: translateZ(46px); pointer-events: none;
}
.game-info small { display: block; font-size: 12px; font-weight: 500; line-height: 1.35; }
.game-info h3 { font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; }
.game-extra { flex: none; pointer-events: auto; padding: 8px 14px; font-size: 13px; }

/* ===== قائمة سجل السكورات المنسدلة ===== */
.score-menu { position: relative; display: inline-block; }
.score-menu-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit;
  font-family: var(--body); font-size: inherit; font-weight: inherit; cursor: pointer; white-space: nowrap;
}
.score-menu-btn::after { content: '▾'; font-size: .9em; transition: transform .2s; }
.score-menu-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.site-nav .score-menu-btn:hover { color: var(--gold); }
.score-menu-btn.big { padding: 11px 16px; border-radius: 10px; background: var(--felt-2); font-size: 16px; font-weight: 600; }
.score-menu-list {
  position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-start: 0; display: grid; gap: 4px;
  min-width: 220px; margin: 0; padding: 6px; border-radius: 8px; list-style: none;
  background: #0a2230; box-shadow: 0 20px 44px rgba(0, 0, 0, .6);
}
.score-menu-list[hidden] { display: none; }
.site-bar .score-menu-list { inset-inline: auto 0; }
.score-menu-list a, .score-menu-list button {
  --c: var(--gold);
  display: block; width: 100%; padding: 11px 12px; border: 0; border-inline-start: 4px solid var(--c); border-radius: 3px;
  background: rgba(255, 255, 255, .04); color: var(--ink); font-family: var(--body); font-size: 15px; font-weight: 500;
  text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.score-menu-list [data-menu-game="pearl"] { --c: #2dd4e8; }
.score-menu-list [data-menu-game="falcon"] { --c: #ff9d4d; }
.score-menu-list [data-menu-game="harbor"] { --c: #4ade80; }
.score-menu-list [data-menu-game="snake"] { --c: #bef264; }
.score-menu-list [data-menu-game="live"] { --c: #f472b6; }
.score-menu-list a:hover, .score-menu-list button:hover,
.score-menu-list a:focus-visible, .score-menu-list button:focus-visible { background: var(--c); color: #04171f; }
.score-menu-list [aria-current="true"] { font-weight: 700; box-shadow: inset 0 0 0 1px var(--c); }

/* ===== شريط التنقل الذهبي: لونه مختلف عن خلفية البحر، والكلمة يطلع حولها مربع ===== */
.site-bar { background: linear-gradient(90deg, #f6cf7b, #dd9a2e); backdrop-filter: none; box-shadow: 0 6px 22px rgba(2, 8, 20, .45); color: #2c1f05; }
.site-bar .logo { color: #2c1f05; }
.site-bar .logo-mark { background: #2c1f05; color: #f6cf7b; }
.site-bar .site-nav { gap: 4px; color: #2c1f05; font-weight: 500; }
.site-bar .online-now b { color: #14532d; }
.site-bar .online-now i { background: #166534; }
.site-bar .site-nav > a, .site-bar .copy-link, .site-bar .site-nav .score-menu-btn, .site-bar .online-now { padding: 7px 11px; border-radius: 5px; transition: background .12s, color .12s; }
.site-bar .btn { background: rgba(44, 31, 5, .13); color: #2c1f05; box-shadow: none; }
.site-bar .site-nav > a:active, .site-bar .copy-link:active, .site-bar .site-nav .score-menu-btn:active, .site-bar .online-now:active, .site-bar .btn:active,
.site-bar .site-nav .score-menu-btn[aria-expanded="true"], .site-bar .online-now[aria-expanded="true"] { background: #2c1f05; color: #f6cf7b; }
.site-bar .online-now:active b, .site-bar .online-now[aria-expanded="true"] b { color: #f6cf7b; }
.site-bar .online-now:active i, .site-bar .online-now[aria-expanded="true"] i { background: #4ade80; }
.site-bar .online-now.owner-view > .wide-only { color: #14532d; font-weight: 700; }
.site-bar .online-now.owner-view:active > .wide-only, .site-bar .online-now.owner-view[aria-expanded="true"] > .wide-only { color: #4ade80; }
@media (hover: hover) { .site-bar .online-now.owner-view:hover > .wide-only { color: #4ade80; } }
.site-bar .online-now .online-admins b { color: #a01414; }
.site-bar .online-now .online-admins i { background: #a01414; box-shadow: none; animation: none; }
.site-bar .online-now:active .online-admins, .site-bar .online-now[aria-expanded="true"] .online-admins,
.site-bar .online-now:active .online-admins b, .site-bar .online-now[aria-expanded="true"] .online-admins b { color: #ff9a9a; }
.site-bar .online-now:active .online-admins i, .site-bar .online-now[aria-expanded="true"] .online-admins i { background: #ff9a9a; }
@media (hover: hover) {
  .site-bar .online-now:hover .online-admins, .site-bar .online-now:hover .online-admins b { color: #ff9a9a; }
  .site-bar .online-now:hover .online-admins i { background: #ff9a9a; }
  .site-bar .site-nav > a:hover, .site-bar .copy-link:hover, .site-bar .site-nav .score-menu-btn:hover, .site-bar .online-now:hover, .site-bar .btn:hover { background: #2c1f05; color: #f6cf7b; transform: none; }
  .site-bar .online-now:hover b { color: #f6cf7b; }
  .site-bar .online-now:hover i { background: #4ade80; }
}
.site-bar a:focus-visible, .site-bar button:focus-visible { outline: 2px solid #2c1f05; outline-offset: 2px; }
.site-bar .score-menu-list button:focus-visible { outline-color: #fff; }
@media (max-width: 620px) { .site-bar .site-nav > a, .site-bar .copy-link, .site-bar .site-nav .score-menu-btn, .site-bar .online-now { padding: 6px; } .site-bar .site-nav { gap: 1px; } }
@media (max-width: 380px) { .site-bar .site-nav > a, .site-bar .copy-link, .site-bar .site-nav .score-menu-btn, .site-bar .online-now { padding: 6px 4px; } }

/* ===== مربع السكورات ===== */
.scores-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-top: clamp(52px, 10vh, 96px); }
.scores-box[hidden] { display: none; }
#scores, #games, #how { scroll-margin-top: 80px; }
.scores-head h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }
.scores-head small { color: var(--muted); font-size: 14px; }
.scores-list:empty { display: none; }
/* قوائم المراكز: لوحة ناعمة، رقم كبير باهت، حرف اللاعب، الاسم، والسكور */
.rank-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: rgba(9, 34, 49, .78); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); overflow: hidden; }
.rank-head { padding: 14px 18px 9px; color: var(--muted); font-size: 13px; }
.rank-row { display: flex; align-items: center; gap: 13px; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, .07); transition: background .18s; }
.rank-no { flex: none; width: 1.45em; font-family: var(--display); font-size: 27px; font-style: normal; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .3); font-variant-numeric: tabular-nums; }
.rank-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: hsl(var(--hue, 190) 58% 40%); color: #fff; font-size: 17px; font-weight: 700; }
.rank-avatar { overflow: hidden; }
.rank-avatar svg { display: block; width: 100%; height: 100%; }
/* الصور الواقعية تعبي مكانها، وتركز على الوجه */
.rank-avatar img, .avatar-pick-btn img, .avatar-grid button img, .player-chip i img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* زر اختيار صورة اللاعب ولوحة الصور */
.avatar-pick { position: relative; flex: none; }
.avatar-pick-btn {
  display: grid; place-items: center; align-content: center; width: 50px; height: 50px; padding: 0; overflow: hidden; border: 0; border-radius: 13px;
  background: rgba(255, 255, 255, .13); color: #dbe8ee; font-family: var(--body); line-height: 1; cursor: pointer;
}
.avatar-pick-btn svg { display: block; width: 100%; height: 100%; }
.avatar-pick-btn:focus-visible, .avatar-grid button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.avatar-plus { font-size: 20px; font-weight: 700; }
.avatar-pick-btn small { margin-top: 2px; font-size: 10px; }
.avatar-panel {
  position: absolute; z-index: 6; bottom: calc(100% + 8px); inset-inline-start: 0; width: min(264px, calc(100vw - 48px)); padding: 10px;
  border-radius: 14px; background: #0b2a3c; box-shadow: 0 14px 38px rgba(0, 0, 0, .55); text-align: center;
}
.avatar-panel[hidden] { display: none; }
.avatar-panel p { margin: 0 0 8px; color: #e6ecef; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; }
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: max-content; align-content: start; gap: 6px; max-height: min(44vh, 280px); padding: 4px; overflow-y: auto; }
.avatar-panel p.avatar-group, .welcome p.avatar-group { grid-column: 1 / -1; margin: 5px 0 0; color: #7df0e8; font-size: 12px; font-weight: 700; text-align: start; }
.avatar-panel p.avatar-group:first-child, .welcome p.avatar-group:first-child { margin-top: 0; }
.avatar-grid button { aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 11px; cursor: pointer; transition: transform .12s; }
.avatar-grid button svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.avatar-grid button[aria-pressed="true"] { box-shadow: 0 0 0 2px #0b2a3c, 0 0 0 4px #2dd4bf; }
@media (hover: hover) { .avatar-grid button:hover { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .avatar-grid button { transition: none; } }
/* نافذة الترحيب في أول دخول */
.welcome {
  width: min(400px, calc(100vw - 28px)); max-height: calc(100dvh - 24px); padding: 18px; overflow-y: auto; border: 0; border-radius: 20px;
  background: #0b2a3c; color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); text-align: center;
}
.welcome::backdrop { background: rgba(2, 12, 20, .72); backdrop-filter: blur(4px); }
.welcome form { display: grid; gap: 10px; justify-items: center; }
.welcome h2 { margin: 0; font-size: 23px; font-weight: 700; }
.welcome p { margin: 0; color: #c7d8df; font-size: 14px; line-height: 1.5; }
.welcome input {
  width: 100%; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 11px; text-align: center;
  background: rgba(255, 255, 255, .1); color: var(--ink); font-family: var(--body); font-size: 16px;
}
.welcome input::placeholder { color: #b9c8d0; }
.welcome .avatar-grid { width: 100%; max-height: min(48vh, 330px); }
.welcome .welcome-note { min-height: 1.3em; color: #ffb4a8; font-size: 13px; font-weight: 600; }
.welcome-actions { display: flex; gap: 8px; justify-content: center; width: 100%; }
.welcome-actions .btn { flex: 1; }
/* اسم اللاعب وصورته في الصفحة الرئيسية */
.player-chip { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.player-chip[hidden] { display: none; }
.player-chip i { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; }
.player-chip svg { display: block; width: 100%; height: 100%; }
.player-chip small { color: var(--muted); font-size: 12px; font-weight: 500; text-decoration: underline; }
.player-chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 12px; }
.rank-who { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.rank-pts { flex: none; font-size: 17px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.rank-time { flex: none; font-size: 13px; font-weight: 500; opacity: .82; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-stats { display: flex; flex: none; gap: 12px; }
/* على الجوال: الاسم فوق، والوقت وLV تحته، عشان الاسم ما ينكسر حرف حرف */
@media (max-width: 620px) {
  .rank-row.with-stats { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; }
  .rank-row.with-stats .rank-no, .rank-row.with-stats .rank-avatar, .rank-row.with-stats .rank-pts { grid-row: 1 / 3; }
  .rank-row.with-stats .rank-who { grid-column: 3; grid-row: 1; }
  .rank-row.with-stats .rank-stats { grid-column: 3; grid-row: 2; }
  .rank-row.with-stats .rank-pts { grid-column: 4; }
}
.rank-row.top .rank-no { color: var(--gold); }
.rank-row.top .rank-who { font-weight: 700; }
.rank-row.me { background: #2dd4bf; color: #04231d; font-weight: 700; }
.rank-row.me .rank-no, .rank-row.me .rank-pts { color: #04231d; }
/* صف اللاعب: يطلع عليه مربع ذهبي بنفس أسلوب الشريط */
.rank-row { border-radius: 5px; }
.rank-row:not(.me):active { background: #f6cf7b; color: #2c1f05; }
.rank-row:not(.me):active .rank-no, .rank-row:not(.me):active .rank-pts { color: #2c1f05; }
@media (hover: hover) {
  .rank-row:not(.me):hover { background: #f6cf7b; color: #2c1f05; }
  .rank-row:not(.me):hover .rank-no, .rank-row:not(.me):hover .rank-pts { color: #2c1f05; }
}
/* نسخة أصغر لقوائم آخر الجولة */
.rank-list.compact { border-radius: 12px; font-size: 14px; }
.rank-list.compact .rank-row { gap: 8px; padding: 6px 10px; }
.rank-list.compact .rank-no { font-size: 17px; }
.rank-list.compact .rank-avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.rank-list.compact .rank-pts { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .rank-row { transition: none; } }
.visitors { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0; color: #d6e2e8; font-size: clamp(16px, 2vw, 20px); font-weight: 600; }
.visitors[hidden] { display: none; }
.visitors b {
  font-family: var(--display); font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #7df0ff, #6ee7a8 35%, #f6cf7b 65%, #ff8fb1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scores-empty { margin: 0; color: #cfe0e6; }
.scores-empty[hidden] { display: none; }
.scores-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.scores-pick { margin-top: 16px; }

/* ===== كيف تبدأ ===== */
.how { padding-top: clamp(52px, 10vh, 96px); }
.how h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 700; margin-bottom: 22px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; color: var(--gold); font-size: 30px; font-weight: 700; margin-bottom: 2px; }
.steps b { display: block; font-weight: 600; margin-bottom: 2px; }
.steps span { color: var(--muted); font-size: 15px; }
.site-footer { padding: 24px 20px 32px; color: var(--muted); text-align: center; font-size: 14px; }

@media (max-width: 820px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scores-box { grid-template-columns: minmax(0, 1fr); }
  .scores-main { order: 2; }
  .hero { min-height: 560px; align-items: flex-end; padding-block: 0 8px; }
  .hero-art { inset: -30px -18px auto; width: calc(100% + 36px); height: 400px; object-position: 58% 40%; }
}
@media (max-width: 620px) {
  .site-nav .wide-only { display: none; }
  .site-nav { font-size: 13px; }
  .game-extra { padding: 7px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .chip { transition: none; }
}