@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

:root {
  --felt: #0e4a36; --felt2: #072a1f; --wood: #2a1a10; --wood2: #3b2415;
  --gold: #e9c46a; --gold2: #b8893a; --ink: #f4ecd8; --mute: #a9b8ae;
  --ivory: #f8f2e2; --pip: #1b1b1f; --red: #e76f51; --cyan: #4cc9f0;
  --tedge: #cdbf9d; --tdiv: #b9aa85; --back: #0c3328; --backin: #12493a;
  --btnink: #2b1d08; --btnsh: #7a5a20; --bar1: #1e120a; --card1: #3b2415f2; --card2: #1e120af2; --bgimg: none;
  --pip1: var(--pip); --pip2: var(--pip); --pip3: var(--pip); --pip4: var(--pip); --pip5: var(--pip); --pip6: var(--pip);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; color: var(--ink);
  background: var(--bgimg), radial-gradient(ellipse at 50% 40%, var(--felt) 0%, var(--felt2) 100%) fixed;
  overflow: hidden; user-select: none;
}
body.offline::after {
  content: 'انقطع الاتصال… تُعاد المحاولة'; position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 6px 16px; border-radius: 99px; font-size: 14px; z-index: 99;
}
button { font-family: inherit; cursor: pointer; }
.btn {
  border: 0; border-radius: 12px; padding: 10px 20px; font-size: 16px; font-weight: 700;
  background: linear-gradient(180deg, var(--gold), var(--gold2)); color: var(--btnink);
  box-shadow: 0 3px 0 var(--btnsh), 0 6px 14px rgba(0,0,0,.35);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btnsh); }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.btn.big { font-size: 19px; padding: 13px 28px; }
.btn.danger { background: linear-gradient(180deg, #ef8a70, #c4492d); color: #fff; box-shadow: 0 3px 0 #7d2c1a; }
.btn.mark-L { background: linear-gradient(180deg, var(--gold), var(--gold2)); }
.btn.mark-R { background: linear-gradient(180deg, #7ad9f5, #2a9fc4); box-shadow: 0 3px 0 #1a6480; color: #04222c; }

/* ───── الأحجار ───── */
.tbody { fill: var(--ivory); stroke: var(--tedge); stroke-width: .03; }
.tshadow { fill: rgba(0,0,0,.35); }
.tdiv { stroke: var(--tdiv); stroke-width: .05; stroke-linecap: round; }
.pip { fill: var(--pip); }
.pip.p1 { fill: var(--pip1); } .pip.p2 { fill: var(--pip2); } .pip.p3 { fill: var(--pip3); }
.pip.p4 { fill: var(--pip4); } .pip.p5 { fill: var(--pip5); } .pip.p6 { fill: var(--pip6); }
.tbackin { fill: var(--backin); stroke: var(--gold2); stroke-width: .04; }
.back .tbody { fill: var(--back); stroke: var(--gold2); }
.tile.last .tbody { stroke: var(--gold); stroke-width: .09; }
.tile.last { animation: drop .35s cubic-bezier(.2,1.4,.4,1); transform-box: fill-box; transform-origin: center; }
@keyframes drop { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.board text.empty { fill: rgba(255,255,255,.25); font-size: .7px; font-weight: 700; }
.mark { cursor: pointer; }
.mark .hit { fill: transparent; }
.mark .ring { fill: color-mix(in srgb, var(--gold) 25%, transparent); stroke: var(--gold); stroke-width: .09; animation: pulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mark-R .ring { fill: color-mix(in srgb, var(--cyan) 25%, transparent); stroke: var(--cyan); }
.mark text { fill: #fff; font-size: .7px; font-weight: 900; pointer-events: none; }
@keyframes pulse { 50% { transform: scale(1.25); } }

/* ───── الطاولة ───── */
.table { position: relative; display: grid; grid-template-rows: auto 1fr auto auto auto; height: 100%; min-height: 0; }
.strip {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px;
  background: linear-gradient(180deg, var(--wood2), var(--wood)); border-block: 2px solid color-mix(in srgb, var(--gold) 25%, transparent);
  transition: box-shadow .3s;
}
.strip.active { box-shadow: inset 0 0 0 2px var(--gold), 0 0 28px color-mix(in srgb, var(--gold) 35%, transparent); }
.pinfo { display: flex; align-items: baseline; gap: 12px; width: 100%; justify-content: center; }
.pname { font-weight: 900; font-size: 20px; }
.pscore { color: var(--gold); font-weight: 700; font-size: 17px; direction: ltr; display: inline-block; unicode-bidi: isolate; }
.pstat { color: var(--red); font-size: 13px; }
.tbar { width: min(520px, 90%); height: 5px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s linear; margin-inline-start: auto; }
.tbar.low i { background: var(--red); }
.hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; direction: ltr; min-height: 20px; }
.ht { --tw: clamp(30px, 10.5vw, 62px); width: var(--tw); padding: 0; border: 0; background: none; display: block; transition: transform .15s, filter .15s, opacity .15s; }
.ht svg { display: block; width: 100%; height: auto; }
.hand.many .ht { --tw: clamp(24px, 8vw, 50px); }
.ht.back, .s-top .ht { --tw: clamp(18px, 5.2vw, 38px); }
button.ht.ok { transform: translateY(-7px); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 90%, transparent)); }
button.ht.no { opacity: .55; }
button.ht.sel { transform: translateY(-16px) scale(1.06); filter: drop-shadow(0 0 10px #fff); }
.mid { position: relative; display: flex; min-height: 0; }
.board { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.board svg { flex: none; overflow: visible; }
.hintrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 12px; background: rgba(0,0,0,.22); }
.hintrow .m-round, .hintrow .m-bone { flex: 0 0 auto; min-width: 5.5em; font-size: 14px; color: var(--mute); white-space: nowrap; }
.hintrow .m-bone { text-align: end; }
.m-bone .bn { font-size: 1.35em; font-weight: 900; color: var(--ink); }
.flash { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: clamp(22px, 5vw, 54px); font-weight: 900; color: #fff; text-shadow: 0 3px 16px #000; opacity: 0; pointer-events: none; white-space: nowrap; }
.flash.on { animation: flash 1.5s ease-out; }
@keyframes flash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-60%); } }
.hint { flex: 1; text-align: center; padding: 5px; font-size: 16px; color: var(--mute); min-height: 30px; }
.hint.mine { color: var(--gold); font-weight: 900; font-size: 19px; }
.actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.actions:not(:empty) { padding: 8px 8px 12px; background: var(--wood); }

.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(3,14,10,.55); z-index: 5; pointer-events: none; }
.overlay.on { display: flex; }
.card { pointer-events: auto; text-align: center; background: linear-gradient(180deg, var(--card1), var(--card2)); border: 2px solid var(--gold2); border-radius: 22px; padding: 22px 34px; min-width: min(420px, 88vw); box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: pop .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.o-kicker { color: var(--mute); font-size: 15px; }
.o-title { font-size: clamp(28px, 5vw, 52px); font-weight: 900; color: var(--gold); margin: 4px 0; }
.final .o-title { font-size: clamp(34px, 6vw, 70px); }
.o-pts { font-size: 20px; font-weight: 700; direction: rtl; }
.o-score { display: flex; justify-content: center; gap: 28px; margin: 16px 0 8px; }
.o-side { display: flex; flex-direction: column; opacity: .7; }
.o-side.w { opacity: 1; }
.o-side b { font-size: 40px; line-height: 1; }
.o-side.w b { color: var(--gold); }
.o-side small { color: var(--mute); font-size: 12px; }
.o-next, .o-wait { color: var(--mute); font-size: 14px; margin-top: 6px; }
.o-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* ───── شاشات الضيف ───── */
.screen { height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.screen.on { display: flex; }
#game.on { display: grid; padding: 0; gap: 0; text-align: start; align-items: stretch; justify-content: stretch; }
.logo { font-size: clamp(44px, 12vw, 80px); font-weight: 900; color: var(--gold); text-shadow: 0 4px 0 var(--btnsh), 0 10px 30px rgba(0,0,0,.5); line-height: 1; }
.sub { color: var(--mute); font-size: 17px; max-width: 30em; line-height: 1.7; }
input[type=text], input[type=number], select {
  font-family: inherit; font-size: 18px; padding: 11px 14px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: rgba(0,0,0,.35); color: var(--ink); text-align: center; outline: none; width: min(320px, 80vw);
}
input:focus, select:focus { border-color: var(--gold); }
.bignum { font-size: clamp(110px, 38vw, 220px); font-weight: 900; line-height: .95; color: #fff; text-shadow: 0 6px 0 var(--gold2), 0 16px 40px rgba(0,0,0,.6); direction: ltr; }
.err { color: var(--red); min-height: 1.4em; font-weight: 700; }

/* ───── لوحة صاحب البث ───── */
.hostwrap { display: grid; grid-template-columns: 330px 1fr; height: 100%; }
.side { background: rgba(0,0,0,.35); border-inline-end: 2px solid color-mix(in srgb, var(--gold) 20%, transparent); display: flex; flex-direction: column; min-height: 0; user-select: text; }
.side h2 { margin: 0; padding: 14px 16px 6px; font-size: 22px; color: var(--gold); }
.side h3 { margin: 0; padding: 12px 16px 6px; font-size: 14px; color: var(--mute); font-weight: 500; }
.quick { display: flex; gap: 8px; padding: 4px 16px 10px; }
.quick input { width: 0; flex: 1; font-size: 22px; font-weight: 900; }
.wl { flex: 1; overflow: auto; padding: 0 10px; min-height: 80px; }
.wrow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; margin-bottom: 5px; background: rgba(255,255,255,.06); }
.wrow.off { opacity: .45; }
.wnum { min-width: 46px; text-align: center; font-size: 24px; font-weight: 900; color: var(--gold); direction: ltr; }
.wname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.wrow button { border: 0; width: 38px; height: 38px; border-radius: 10px; font-size: 19px; font-weight: 900; color: #fff; }
.wrow .y { background: #2a9d63; } .wrow .n { background: #8c3a2a; }
.empty-l { color: var(--mute); text-align: center; padding: 24px 10px; font-size: 15px; line-height: 1.8; }
.sets { padding: 6px 16px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; color: var(--mute); border-top: 1px solid rgba(255,255,255,.1); }
.sets label { display: flex; flex-direction: column; gap: 3px; }
.sets select, .sets input { width: 100%; font-size: 15px; padding: 7px 8px; }
.sets .wide { grid-column: 1 / -1; }
.sets .btn { font-size: 14px; padding: 8px 10px; }
.main { position: relative; min-width: 0; min-height: 0; }
.placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--mute); font-size: 20px; text-align: center; padding: 20px; }
.hostbar { padding: 0 16px 8px; }
.hostbar .btn { width: 100%; font-size: 14px; padding: 8px 12px; }

/* ───── شاشة البث ───── */
.stream { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.s-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px; background: linear-gradient(180deg, var(--bar1), var(--wood)); border-bottom: 2px solid var(--gold2); }
.s-head .logo { font-size: clamp(26px, 3.4vw, 50px); text-shadow: 0 3px 0 var(--btnsh); }
.s-join { font-size: clamp(14px, 1.7vw, 24px); color: var(--mute); text-align: left; }
.s-join b { color: #fff; direction: ltr; display: inline-block; font-size: 1.25em; }
.s-body { position: relative; min-height: 0; }
.s-body .ht, .s-body .s-top .ht { --tw: clamp(30px, 4.4vw, 86px); }
.s-body .ht.back, .s-body .s-bot .ht.back { --tw: clamp(20px, 2.6vw, 50px); }
.s-body .pname { font-size: clamp(20px, 2.4vw, 38px); }
.s-body .pscore { font-size: clamp(17px, 2vw, 32px); }
.s-body .hint { font-size: clamp(16px, 1.8vw, 28px); }
.s-body .hintrow .m-round, .s-body .hintrow .m-bone { font-size: clamp(14px, 1.5vw, 24px); }
.s-lobby { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 3vh 4vw; text-align: center; }
.s-lobby .big { font-size: clamp(30px, 5vw, 84px); font-weight: 900; color: var(--gold); }
.s-lobby .steps { font-size: clamp(16px, 2.2vw, 34px); line-height: 1.9; }
.s-lobby .steps b { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-height: 38vh; overflow: hidden; }
.chip { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 99px; padding: 5px 16px 5px 6px; font-size: clamp(15px, 1.7vw, 26px); animation: pop .4s; }
.chip b { background: var(--gold); color: var(--btnink); border-radius: 99px; min-width: 1.9em; padding: 2px 8px; direction: ltr; font-weight: 900; }
.s-foot { padding: 6px 20px; text-align: center; font-size: clamp(13px, 1.4vw, 21px); color: var(--mute); background: var(--bar1); }
.s-foot b { color: var(--gold); }

@media (max-width: 820px) {
  .hostwrap { display: block; overflow: auto; }
  .side { border-inline-end: 0; }
  .wl { max-height: 40vh; }
  .main { height: 100vh; }
}

/* ───── الثيمات: يختارها صاحب البث من لوحته فتُطبَّق على اللاعب وشاشة البث معاً ───── */
:root[data-theme=cafe] {
  --felt: #5e3c22; --felt2: #2a170b; --wood: #1a0f08; --wood2: #2c190d; --gold: #f0b35a; --gold2: #b8742a; --mute: #cdbba2;
  --ivory: #fbf3dc; --back: #6b1f1f; --backin: #8a2b2b; --bar1: #120a05; --card1: #2c190df2; --card2: #120a05f2;
  --bgimg: repeating-linear-gradient(91deg, rgba(0,0,0,.07) 0 2px, transparent 2px 11px);
}
:root[data-theme=midnight] {
  --felt: #1b2250; --felt2: #090b20; --wood: #0c0f26; --wood2: #161b3d; --gold: #9db4ff; --gold2: #5b6fd6; --ink: #eef1ff; --mute: #98a0c8;
  --ivory: #eef1ff; --pip: #141838; --tedge: #b6bee8; --tdiv: #aab3e0; --back: #141a44; --backin: #222b66;
  --btnink: #0a0e2a; --btnsh: #2d3a8a; --bar1: #080a1c; --card1: #161b3df2; --card2: #090b20f2;
  --bgimg: radial-gradient(1.5px 1.5px at 12% 22%, #fff8, transparent), radial-gradient(1px 1px at 68% 14%, #fff7, transparent), radial-gradient(1.5px 1.5px at 84% 62%, #fff6, transparent), radial-gradient(1px 1px at 32% 78%, #fff7, transparent), radial-gradient(1px 1px at 52% 46%, #fff5, transparent);
}
:root[data-theme=desert] {
  --felt: #c98b4a; --felt2: #7a4a20; --wood: #4a2a12; --wood2: #6a3d1c; --gold: #ffe0a3; --gold2: #d9a441; --ink: #fff6e6; --mute: #f3dfbf;
  --ivory: #fffaf0; --pip: #3a2010; --tedge: #e3c9a0; --tdiv: #d2b483; --back: #7a3b1a; --backin: #9a5226;
  --btnink: #3a2010; --btnsh: #8a5a1a; --bar1: #3a200d; --card1: #6a3d1cf2; --card2: #3a200df2;
}
:root[data-theme=royal] {
  --felt: #5a0f24; --felt2: #22040d; --wood: #160309; --wood2: #2a0812; --gold: #f3d27a; --gold2: #b8912f; --mute: #d8bcc4;
  --ivory: #17131a; --pip: #f3d27a; --tedge: #b8912f; --tdiv: #8a6a1f; --back: #3a0a18; --backin: #5a0f24;
  --bar1: #120207; --card1: #2a0812f2; --card2: #120207f2;
}
:root[data-theme=ocean] {
  --felt: #0f6a8a; --felt2: #052a40; --wood: #062033; --wood2: #0b3450; --gold: #7fe3d4; --gold2: #2aa79a; --ink: #eafcff; --mute: #a3cddb;
  --ivory: #ffffff; --pip: #0b3450; --tedge: #b5dbe6; --tdiv: #9ccbd8; --back: #0b3450; --backin: #0f5a78;
  --btnink: #04222c; --btnsh: #176a62; --bar1: #041826; --card1: #0b3450f2; --card2: #041826f2;
}
:root[data-theme=neon] {
  --felt: #1a0733; --felt2: #05010c; --wood: #0a0314; --wood2: #140728; --gold: #ff4fd8; --gold2: #a21caf; --ink: #fdf4ff; --mute: #bda3d6; --cyan: #39f3ff;
  --ivory: #0d0716; --pip: #39f3ff; --tedge: #ff4fd8; --tdiv: #7a2a9a; --back: #0d0716; --backin: #2a0f4a;
  --btnink: #ffffff; --btnsh: #5a0f66; --bar1: #05010c; --card1: #140728f2; --card2: #05010cf2;
  --bgimg: linear-gradient(rgba(255,79,216,.07) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(57,243,255,.06) 1px, transparent 1px) 0 0 / 46px 46px;
}
:root[data-theme=neon] .tbody { stroke-width: .06; }
:root[data-theme=colors] {
  --felt: #2f4858; --felt2: #14222c; --wood: #101a21; --wood2: #1c2c38; --gold: #ffd166; --gold2: #e09f1f; --mute: #a8bac6;
  --ivory: #ffffff; --tedge: #cfd8de; --tdiv: #b9c5cd; --back: #22394a; --backin: #2f5068; --bar1: #0c1419; --card1: #1c2c38f2; --card2: #0c1419f2;
  --pip1: #1e88e5; --pip2: #43a047; --pip3: #e53935; --pip4: #8e24aa; --pip5: #fb8c00; --pip6: #00897b;
}

.themes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.themes button { border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: none; color: #fff; font-size: 12px; font-weight: 700; }
.themes button.on { border-color: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 60%, transparent); }
.themes .sw { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
.themes .sw i { display: block; width: 9px; height: 18px; border-radius: 2px; position: relative; }
.themes .sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--d); box-shadow: 0 9px 0 var(--d); }
.themes span { display: block; padding: 2px 0 3px; background: rgba(0,0,0,.45); }