/* ===== base ===== */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ===== base ===== */
html{background:#03050d}
body.loading{overflow:hidden}
body.loading *{animation-play-state:paused!important}
body.loading #preload,body.loading #preload *{animation-play-state:running!important}
#preload{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;color:#e9f1ff;direction:rtl;font-family:'Cairo',system-ui,-apple-system,sans-serif;background:radial-gradient(900px 600px at 50% 28%,#132552,transparent 62%),radial-gradient(700px 520px at 88% 104%,#2a0f55,transparent 60%),radial-gradient(600px 460px at 6% 104%,#05364a,transparent 60%),#03050d;transition:opacity .8s ease,transform .9s cubic-bezier(.6,0,.2,1),filter .8s}
#preload.out{opacity:0;transform:scale(1.14);filter:blur(10px);pointer-events:none}
#preload::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 160deg at 50% 0%,transparent 0 6%,rgba(168,240,255,.10) 8%,transparent 12%,transparent 30%,rgba(168,240,255,.08) 32%,transparent 36%);animation:plSway 14s ease-in-out infinite alternate}
@keyframes plSway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.pl-in{position:relative;display:grid;justify-items:center;gap:14px;width:min(86vw,360px);text-align:center}
.pl-logo{position:relative;width:150px;height:140px;display:grid;place-items:center}
.pl-ring{position:absolute;inset:0;width:100%;height:100%;animation:plSpin 18s linear infinite}
.pl-ring circle{fill:none;stroke:url(#plg);stroke-linecap:round}
.pl-crest{position:relative;width:92px;height:86px;filter:drop-shadow(0 0 22px rgba(127,227,255,.75));animation:plFloat 3.2s ease-in-out infinite}
.pl-crest path,.pl-crest circle{fill:none;stroke:url(#plg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:plDraw 1.9s .15s cubic-bezier(.5,0,.2,1) forwards}
@keyframes plDraw{to{stroke-dashoffset:0}}
@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plFloat{50%{transform:translateY(-6px)}}
.pl-eye{margin:0;font:700 11px 'Cinzel',serif;letter-spacing:.5em;padding-inline-start:.5em;color:#7fe3ff;direction:ltr;opacity:0;animation:plUp .8s .5s both}
.pl-title{margin:0;font-family:'Reem Kufi','Cairo',serif;font-weight:700;font-size:clamp(40px,12vw,56px);line-height:1.15;background:linear-gradient(100deg,#2aa8d8,#d6f8ff 28%,#4fd8ff 48%,#fff 56%,#2aa8d8 78%,#a8f0ff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:plUp .9s .35s both,plShine 4s linear infinite}
@keyframes plShine{from{background-position:100% 0}to{background-position:-120% 0}}
@keyframes plUp{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.pl-pieces{display:flex;gap:14px;font-size:24px;color:#7fe3ff;margin-top:4px}
.pl-pieces b{font-weight:400;opacity:.25;animation:plWave 1.6s ease-in-out infinite;text-shadow:0 0 14px rgba(79,216,255,.9)}
.pl-pieces b:nth-child(2){animation-delay:.2s}.pl-pieces b:nth-child(3){animation-delay:.4s}.pl-pieces b:nth-child(4){animation-delay:.6s}.pl-pieces b:nth-child(5){animation-delay:.8s}
@keyframes plWave{50%{opacity:1;transform:translateY(-8px) scale(1.15)}}
.pl-bar{position:relative;width:100%;height:7px;margin-top:6px;border-radius:9px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 4px rgba(0,0,0,.6);overflow:hidden}
.pl-bar i{position:absolute;inset:0;transform-origin:100% 50%;transform:scaleX(0);border-radius:9px;background:linear-gradient(270deg,#7fe3ff,#a366ff);box-shadow:0 0 16px #4fd8ff}
.pl-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(120%);animation:plSweep 1.4s linear infinite}
@keyframes plSweep{to{transform:translateX(-120%)}}
.pl-row{display:flex;justify-content:space-between;width:100%;font-size:13.5px;font-weight:700;color:#9fb0d4}
.pl-num{font-family:'Cinzel',serif;font-weight:900;color:#d6f8ff;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){#preload::before,.pl-ring,.pl-crest{animation:none}}
@media (max-width:900px),(pointer:coarse){#preload::before,.pl-ring,.pl-pieces,.pl-bar i::after{display:none!important}.pl-crest,.pl-title{animation:none!important;filter:none!important}}

/* ===== base ===== */
/* ===== ALPHA LEO — theme tokens (diamond / amethyst / emerald) ===== */
:root{--x1:#f2fdff;--x2:#d6f8ff;--x3:#a8f0ff;--x4:#7fe3ff;--x5:#4fd8ff;--x6:#2aa8d8;--x7:#1c7aa6;--x8:#1b5f7e;--x9:#0f4a6b;--x10:#04202e;--a:79,216,255;--h:168,240,255;--p:234,252,255;--l:110,205,255;--bg1:#132552;--bg2:#2a0f55;--bg3:#05364a}
html[data-theme="violet"]{--x1:#fbf3ff;--x2:#ecd9ff;--x3:#d3b0ff;--x4:#bb8cff;--x5:#a366ff;--x6:#7f43d6;--x7:#5d2ba8;--x8:#46207f;--x9:#34175f;--x10:#1a0a33;--a:163,102,255;--h:211,176,255;--p:244,232,255;--l:190,140,255;--bg1:#2a1458;--bg2:#55104a;--bg3:#12204a}
html[data-theme="emerald"]{--x1:#f1fff8;--x2:#d0ffe8;--x3:#98f5c8;--x4:#63e8a8;--x5:#2fd68a;--x6:#1ba66a;--x7:#107a4d;--x8:#0e5e3c;--x9:#0a4a2f;--x10:#02200f;--a:47,214,138;--h:152,245,200;--p:232,255,244;--l:90,225,160;--bg1:#0b3a3a;--bg2:#0d2f55;--bg3:#0a4a2a}
/* Layout concept: a throne-room hall. Centered gilded board flanked by two glass panels (right: players and commands, left: move record), gold dust drifting through shafts of light. Single committed dark world. */
:root {
  --void: #03050d;
  --night: #070a18;
  --panel-a: rgba(16,26,58, .80);
  --panel-b: rgba(5,9,22, .86);
  --gold: var(--x5);
  --gold-hi: var(--x3);
  --gold-pale: var(--x2);
  --gold-lo: var(--x8);
  --ivory: #e9f1ff;
  --mist: #9fb0d4;
  --ruby: #d02548;
  --sapphire: #7fb8ff;
  --font-display: 'Reem Kufi', 'Cairo', 'Amiri', serif;
  --font-ui: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-latin: 'Cinzel', 'Times New Roman', serif;
  --gut: 20px;
  --fr: clamp(18px, 2.8vw, 32px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 720px at 50% -12%, var(--bg1) 0%, transparent 62%),
    radial-gradient(900px 620px at 92% 108%, var(--bg2) 0%, transparent 58%),
    radial-gradient(820px 520px at 4% 104%, var(--bg3) 0%, transparent 60%),
    var(--void);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  direction: rtl;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible + label { outline: 2px solid var(--gold-pale); outline-offset: 3px; }

#ambient, #burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ambient { z-index: 0; }
#burst { z-index: 90; }
.beams { position: fixed; inset: -30% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none; overflow: hidden; opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 78%); }
.beams i { position: absolute; inset: -40%; background: conic-gradient(from 168deg at 50% 0%, transparent 0 4%, rgba(var(--h),.11) 6%, transparent 9%, transparent 14%, rgba(var(--p),.08) 16%, transparent 20%, transparent 26%, rgba(var(--h),.10) 28%, transparent 31%, transparent 100%); animation: sway 26s ease-in-out infinite alternate; }
.beams i:nth-child(2) { animation-duration: 38s; animation-direction: alternate-reverse; opacity: .6; transform: scale(1.2); }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

.app { position: relative; z-index: 2; max-width: 1480px; margin: 0 auto; padding-inline: var(--gut); padding-block: 14px 34px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crest { width: 54px; height: 50px; flex: none; filter: drop-shadow(0 0 12px rgba(var(--h),.45)); }
.crest path, .crest circle { fill: none; stroke: url(#gStroke); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.boot .crest path { animation: draw 1.8s .15s cubic-bezier(.5,0,.2,1) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.eyebrow { margin: 0; font-family: var(--font-latin); font-size: 11px; letter-spacing: .5em; color: var(--gold); opacity: .85; direction: ltr; text-align: right; }
h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; letter-spacing: 0;
  background: linear-gradient(100deg, var(--x6) 0%, var(--gold-pale) 22%, var(--gold) 40%, var(--x2) 55%, var(--x6) 75%, var(--gold-hi) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; text-shadow: none; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.top-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; border: 1px solid rgba(var(--a),.45); border-radius: 10px; padding: 10px 18px; font-weight: 700; background: linear-gradient(180deg, rgba(24,42,92,.65), rgba(8,14,34,.85)); color: var(--gold-pale); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .18s, box-shadow .25s, border-color .25s, filter .25s; min-height: 42px; }
.btn svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold-hi); box-shadow: 0 8px 22px rgba(var(--a),.22); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.gold { color: var(--x10); border-color: var(--x2); background: linear-gradient(180deg, var(--x3), var(--gold) 52%, var(--x7)); box-shadow: 0 8px 22px rgba(var(--a),.28), inset 0 1px 0 var(--x1); text-shadow: 0 1px 0 rgba(var(--p),.5); }
.btn.gold::after, .btn.shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-130%); }
.btn.gold:hover::after { transform: translateX(130%); transition: transform .8s; }
.btn.danger.armed { border-color: var(--ruby); color: #ffd3dc; background: linear-gradient(180deg, rgba(120,20,44,.8), rgba(60,8,22,.9)); animation: armed .8s ease-in-out infinite alternate; }
@keyframes armed { to { box-shadow: 0 0 18px rgba(208,37,72,.6); } }
.icon-btn { width: 44px; padding: 0; }

/* ---------- stage grid ---------- */
.stage { --bs: min(calc(100vw - 2 * var(--gut) - 2 * var(--fr)), 640px); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); justify-items: center; direction: ltr; }
.stage > * { direction: rtl; }
.board-zone { order: 2; max-width: 100%; }
.opp { order: 1; }
.me { order: 3; }
.controls { order: 4; }
.moves { order: 5; }
.opp, .me, .controls, .moves { width: min(100%, calc(var(--bs) + 2 * var(--fr))); }
@media (min-width: 760px) { .stage { --bs: min(calc(100vw - 2 * var(--gut) - 2 * var(--fr)), 660px); } }
@media (min-width: 1180px) {
  .stage { --bs: min(max(360px, calc(100dvh - 170px - 2 * var(--fr))), calc(100vw - 760px), 720px); grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr); grid-template-rows: auto 1fr auto; gap: 18px 26px; align-items: stretch; justify-items: stretch; }
  .board-zone { order: 0; grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; }
  .opp { grid-column: 3; grid-row: 1; width: auto; }
  .controls { grid-column: 3; grid-row: 2; width: auto; align-self: center; }
  .me { grid-column: 3; grid-row: 3; width: auto; }
  .moves { grid-column: 1; grid-row: 1 / 4; width: auto; max-height: calc(var(--bs) + 2 * var(--fr)); align-self: center; }
}

/* ---------- cards ---------- */
.card { position: relative; border-radius: 16px; padding: 16px; border: 1px solid rgba(var(--a),.30); background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(var(--p),.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card::before { content: ''; position: absolute; inset: 5px; border-radius: 11px; border: 1px solid rgba(var(--a),.10); pointer-events: none; }
.player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; transition: box-shadow .5s, border-color .5s; }
.player.active { border-color: rgba(var(--h),.75); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 36px rgba(var(--a),.25), inset 0 1px 0 rgba(var(--p),.2); }
.avatar { overflow: hidden; font: 900 26px var(--font-display); color: var(--x2); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(40,76,140,.85), rgba(6,10,24,.95)); border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(var(--a),.14), 0 6px 18px rgba(0,0,0,.6); }
.avatar svg { width: 44px; height: 44px; }
.player.active .avatar { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px rgba(var(--h),.22), 0 0 26px rgba(var(--h),.5), 0 6px 18px rgba(0,0,0,.6); } }
.pinfo { min-width: 0; }
.pname { font-family: var(--font-display); font-size: 23px; line-height: 1.2; color: var(--gold-pale); }
.psub { font-size: 12.5px; color: var(--mist); }
.caps { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-height: 24px; margin-top: 4px; direction: ltr; justify-content: flex-end; }
.caps svg { width: 24px; height: 24px; margin-inline: -5px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); animation: capIn .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes capIn { from { transform: translateY(-14px) scale(.4); opacity: 0; } }
.adv { margin-inline-start: 10px; font-family: var(--font-latin); font-size: 13px; color: var(--gold-hi); }
.clock { font-family: var(--font-latin); font-weight: 700; font-size: 25px; letter-spacing: .04em; font-variant-numeric: tabular-nums; direction: ltr; color: var(--ivory); padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(var(--a),.28); min-width: 92px; text-align: center; }
.clock.off { display: none; }
.player.active .clock { color: var(--gold-pale); border-color: var(--gold); box-shadow: 0 0 16px rgba(var(--a),.3); }
.clock.low { color: #ffc0cd; border-color: var(--ruby); animation: armed .5s ease-in-out infinite alternate; }

.controls { display: grid; gap: 14px; }
.status { display: flex; align-items: center; gap: 12px; }
.pulse { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, var(--x1), var(--gold) 60%, var(--x8)); box-shadow: 0 0 14px var(--gold); animation: breathe 2s ease-in-out infinite; }
.pulse.dark { background: radial-gradient(circle at 35% 30%, #7d7894, #17141f 70%); box-shadow: 0 0 10px rgba(var(--a),.7); outline: 1px solid var(--gold); }
.pulse.end { animation: none; background: var(--ruby); box-shadow: 0 0 14px var(--ruby); }
#status { font-family: var(--font-display); font-size: 25px; line-height: 1.25; color: var(--gold-pale); }
#substatus { font-size: 13px; color: var(--mist); }
.dots::after { content: ''; display: inline-block; width: 1.4em; text-align: start; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.btnrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.moves { display: flex; flex-direction: column; min-height: 0; }
.moves h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold); display: flex; align-items: center; justify-content: space-between; }
.moves h2 small { font-family: var(--font-latin); font-size: 12px; letter-spacing: .2em; color: var(--mist); font-weight: 400; }
#moves { list-style: none; margin: 0; padding: 0 2px 0 6px; overflow-y: auto; max-height: 230px; flex: 1; direction: ltr; scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
@media (min-width: 1180px) { #moves { max-height: none; } }
#moves li { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 6px; padding: 5px 6px; border-radius: 8px; font-size: 16px; font-variant-numeric: tabular-nums; align-items: center; }
#moves li:nth-child(odd) { background: rgba(255,255,255,.025); }
#moves li .n { font-family: var(--font-latin); font-size: 12px; color: var(--gold-lo); text-align: center; }
#moves li span.mv { padding: 2px 8px; border-radius: 6px; color: var(--ivory); min-height: 1.5em; }
#moves li span.mv.cur { animation: moveIn .5s ease both; background: linear-gradient(90deg, rgba(var(--a),.35), rgba(var(--a),.12)); color: var(--gold-pale); box-shadow: inset 0 0 0 1px rgba(var(--h),.5); }
@keyframes moveIn { from { opacity: 0; transform: translateX(-10px); } }
.empty-note { color: var(--mist); font-size: 14px; padding: 16px 6px; direction: rtl; }

/* ---------- board ---------- */
.board-zone { position: relative; }
.frame { position: relative; padding: var(--fr); border-radius: 18px;
  background: linear-gradient(135deg, var(--x3) 0%, var(--x6) 18%, var(--x9) 36%, var(--x4) 52%, var(--x8) 70%, var(--x5) 86%, var(--x9) 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 80px rgba(var(--a),.16), inset 0 2px 0 rgba(var(--p),.7), inset 0 -3px 6px rgba(4,24,44,.7); }
.frame::before { content: ''; position: absolute; inset: 7px; border-radius: 12px; background: linear-gradient(160deg, #0c1430, #03050f); box-shadow: inset 0 0 0 1px rgba(var(--h),.45), inset 0 8px 22px rgba(0,0,0,.8); }
.frame::after { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: overlay; animation: sweep 9s 2.6s ease-in-out infinite; }
@keyframes sweep { 0% { background-position: 160% 0; } 22%, 100% { background-position: -60% 0; } }
.trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; overflow: visible; }
.trace rect { fill: none; stroke: var(--gold-pale); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px var(--x2)); }
.boot .trace rect { animation: traceDraw 2.1s .2s cubic-bezier(.6,0,.3,1) both; }
@keyframes traceDraw { 0% { stroke-dashoffset: 1; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.coord { position: absolute; z-index: 2; display: flex; font-family: var(--font-latin); font-weight: 700; font-size: clamp(9px, 1.3vw, 13px); color: var(--gold-hi); text-shadow: 0 1px 2px #000; direction: ltr; pointer-events: none; opacity: .92; }
.coord span { flex: 1; display: grid; place-items: center; }
.coord.h { left: var(--fr); right: var(--fr); height: var(--fr); }
.coord.v { top: var(--fr); bottom: var(--fr); width: var(--fr); flex-direction: column; }
.coord.t { top: 0; } .coord.b { bottom: 0; } .coord.l { left: 0; } .coord.r { right: 0; }
.board-shake { position: relative; z-index: 3; }
.board-shake.shake { animation: shake .34s cubic-bezier(.3,.7,.4,1); }
@keyframes shake { 15% { transform: translate(-3px, 2px); } 35% { transform: translate(3px, -2px); } 55% { transform: translate(-2px, -1px); } 75% { transform: translate(2px, 1px); } }
.board { position: relative; width: var(--bs); height: var(--bs); direction: ltr; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 3px; overflow: hidden;
  background: conic-gradient(#dfe9f5 25%, #0b1024 0 50%, #dfe9f5 0 75%, #0b1024 0) 0 0 / 25% 25%;
  box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(var(--h),.7), 0 10px 40px rgba(0,0,0,.8); }
.board.dragging { cursor: grabbing; }
.board.canpick { cursor: grab; }
#marble { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
#marble.ready { opacity: 1; }
.board::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8; background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.28) 100%); }
.boot .board { animation: boardIn 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes boardIn { from { opacity: 0; transform: perspective(900px) rotateX(24deg) scale(.86); filter: brightness(2.2); } }
.boot .frame { animation: frameIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes frameIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
#sqLayer, #pieceLayer, #arrowLayer { position: absolute; inset: 0; }
#arrowLayer { width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
#pieceLayer { z-index: 5; pointer-events: none; }
#sqLayer { z-index: 2; pointer-events: none; }
.sq, .rip { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; pointer-events: none; }
.sq::before, .sq::after { content: ''; position: absolute; pointer-events: none; }
.sq.last::before { inset: 0; background: rgba(var(--l),.30); box-shadow: inset 0 0 0 2px rgba(var(--h),.5), inset 0 0 18px rgba(var(--l),.5); }
.sq.sel::before { inset: 0; background: rgba(var(--h),.34); box-shadow: inset 0 0 0 3px var(--gold-pale), inset 0 0 26px rgba(var(--p),.85); animation: selPulse 1.2s ease-in-out infinite alternate; }
@keyframes selPulse { to { box-shadow: inset 0 0 0 3px var(--gold-pale), inset 0 0 40px rgba(var(--p),1); } }
.sq.tg::after { left: 34%; top: 34%; width: 32%; height: 32%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--x1), var(--gold) 70%); box-shadow: 0 0 14px 2px rgba(var(--h),.75); animation: dotIn .35s cubic-bezier(.2,1.5,.4,1) both; }
.sq.tg.cap::after { left: 5%; top: 5%; width: 90%; height: 90%; background: none; border: 4px solid rgba(var(--h),.92); box-shadow: 0 0 18px 2px rgba(var(--h),.7), inset 0 0 18px rgba(var(--h),.6); animation: capRing 1s ease-in-out infinite alternate; }
@keyframes dotIn { from { transform: scale(0); } }
@keyframes capRing { to { transform: scale(.93); box-shadow: 0 0 26px 4px rgba(var(--h),.9), inset 0 0 22px rgba(var(--h),.8); } }
.sq.hov::before { inset: 0; background: rgba(var(--p),.38); box-shadow: inset 0 0 0 4px var(--x2), inset 0 0 30px rgba(var(--p),.9), 0 0 26px 4px rgba(var(--h),.8); z-index: 3; }
.sq.chk::before { inset: -12%; background: radial-gradient(circle, rgba(208,37,72,.95) 0%, rgba(208,37,72,.5) 42%, transparent 70%); animation: chkPulse .9s ease-in-out infinite alternate; }
@keyframes chkPulse { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
.sq.hint::before { inset: 0; background: rgba(127,184,255,.34); box-shadow: inset 0 0 0 3px var(--sapphire), inset 0 0 26px rgba(127,184,255,.8); animation: selPulse 1s ease-in-out infinite alternate; }
.rip { z-index: 3; }
.rip::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 3px solid var(--gold-hi); box-shadow: 0 0 20px var(--gold), inset 0 0 14px rgba(var(--h),.7); animation: rip .8s cubic-bezier(.1,.7,.3,1) both; }
.rip.ruby::before { border-color: #ff7a93; box-shadow: 0 0 22px var(--ruby), inset 0 0 16px rgba(208,37,72,.8); }
@keyframes rip { from { transform: scale(.25); opacity: 1; } to { transform: scale(2); opacity: 0; } }

.piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; pointer-events: none; will-change: transform; filter: drop-shadow(0 5px 3px rgba(0,0,0,.55)); }
.piece svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pw { fill: url(#gGold); stroke: #2a5a80; stroke-width: 1.4; stroke-linejoin: round; color: rgba(20,60,95,.62); }
.pb { fill: url(#gObs); stroke: var(--x4); stroke-width: 1.6; stroke-linejoin: round; color: rgba(var(--h),.72); }
.piece.lifted { z-index: 60; filter: drop-shadow(0 20px 12px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(var(--h),.7)); }
.piece.top { z-index: 30; }
.glide .piece { transition: transform .8s cubic-bezier(.6,0,.2,1); }
.piece.fallen { z-index: 40; transform-origin: 50% 90%; animation: topple 1.5s cubic-bezier(.5,0,.8,.4) both; }
@keyframes topple { 0% { transform: var(--t) rotate(0); } 60% { transform: var(--t) rotate(-84deg) translateY(2%); } 74% { transform: var(--t) rotate(-98deg); } 100% { transform: var(--t) rotate(-90deg) translateY(4%); opacity: .85; } }

.banner { position: absolute; z-index: 14; left: 0; right: 0; top: 50%; display: grid; place-items: center; pointer-events: none; }
.banner b { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 8vw, 92px); line-height: 1; padding: 6px 24px 12px; background: linear-gradient(180deg, var(--x1), var(--gold) 55%, var(--x8)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(var(--h),.75)); animation: bannerPop 1.6s cubic-bezier(.2,.9,.2,1) both; }
.banner.ruby b { background: linear-gradient(180deg, #ffd6de, #ff4e72 55%, #8c0f2a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(208,37,72,.85)); }
@keyframes bannerPop { 0% { transform: translateY(-50%) scale(.3) rotate(-4deg); opacity: 0; } 18% { transform: translateY(-50%) scale(1.14) rotate(1deg); opacity: 1; } 32% { transform: translateY(-50%) scale(1); } 78% { transform: translateY(-50%) scale(1); opacity: 1; } 100% { transform: translateY(-62%) scale(1.06); opacity: 0; } }

[hidden] { display: none !important; }
.promo { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(5,4,10,.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 12px; animation: fadeIn .3s both; }
.promo-box { text-align: center; }
.promo-box h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); color: var(--gold-pale); }
.promo-row { display: flex; gap: clamp(6px, 1.6vw, 14px); justify-content: center; direction: ltr; }
.pbtn { width: clamp(64px, 17vw, 112px); aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; padding: 6px; border: 1.5px solid rgba(var(--a),.6); background: radial-gradient(circle at 50% 30%, rgba(40,70,140,.9), rgba(6,10,22,.95)); box-shadow: 0 10px 28px rgba(0,0,0,.6); transition: transform .2s, box-shadow .2s, border-color .2s; animation: pbIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.pbtn:nth-child(2) { animation-delay: .06s; } .pbtn:nth-child(3) { animation-delay: .12s; } .pbtn:nth-child(4) { animation-delay: .18s; }
@keyframes pbIn { from { transform: translateY(26px) scale(.6); opacity: 0; } }
.pbtn:hover { transform: translateY(-8px) scale(1.08); border-color: var(--gold-pale); box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 0 30px rgba(var(--h),.6); }
.pbtn svg { width: 100%; height: 100%; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: radial-gradient(circle at 50% 38%, rgba(22,30,84,.78), rgba(3,2,8,.93)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .5s both; }
.overlay[hidden] { display: none; }
.sheet { width: min(100%, 560px); text-align: center; position: relative; }
.sheet.panel { padding: 26px 24px 24px; text-align: start; }
.sheet h2 { margin: 0; font-family: var(--font-display); font-size: 34px; color: var(--gold-pale); text-align: center; }
.sheet .lead { text-align: center; color: var(--mist); margin: 4px 0 18px; }
.opts { border: 0; margin: 0 0 16px; padding: 0; }
.opts legend { font-weight: 700; color: var(--gold); margin-bottom: 8px; padding: 0; font-size: 14px; letter-spacing: .02em; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { flex: 1 1 auto; min-width: 0; text-align: center; padding: 9px 14px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(var(--a),.32); background: rgba(6,10,24,.6); color: var(--ivory); transition: all .2s; font-weight: 500; }
.seg label:hover { border-color: var(--gold-hi); }
.seg input:checked + label { color: var(--x10); font-weight: 800; border-color: var(--x2); background: linear-gradient(180deg, var(--x3), var(--gold) 60%, var(--x7)); box-shadow: 0 4px 16px rgba(var(--a),.35); }
.seg input:disabled + label { opacity: .35; cursor: not-allowed; }
.sheet .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.result-crest { width: 120px; height: 110px; margin: 0 auto 4px; filter: drop-shadow(0 0 22px rgba(var(--h),.65)); display: block; }
.result-crest path, .result-crest circle { fill: none; stroke: url(#gStroke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.result:not([hidden]) .result-crest path { animation: draw 1.6s .1s ease both; }
#resTitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 13vw, 104px); line-height: 1.1; margin: 0; background: linear-gradient(180deg, var(--x1), var(--gold) 55%, var(--x8)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(var(--h),.6)); animation: titleIn 1s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes titleIn { from { transform: scale(.4) translateY(30px); opacity: 0; } }
#resSub { font-size: 19px; color: var(--ivory); margin: 4px 0 22px; animation: fadeIn 1.2s .4s both; }
.result .acts { animation: fadeIn 1s .8s both; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 560px) {
  :root { --gut: 14px; }
  .top { min-height: 56px; }
  .crest { width: 42px; height: 38px; }
  .eyebrow { letter-spacing: .3em; font-size: 9px; }
  .player { grid-template-columns: auto 1fr; gap: 10px; padding: 12px; }
  .player .clock { grid-column: 1 / -1; justify-self: stretch; }
  .avatar { width: 48px; height: 48px; } .avatar svg { width: 36px; height: 36px; }
  .pname { font-size: 20px; }
  .btn { padding: 9px 12px; }
  .sheet.panel { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .beams i { animation: none !important; }
}


/* ===================== ALPHA LEO additions ===================== */
#newModal, #settings { z-index: 85; }
.btn[aria-pressed="false"] { opacity: .55; }

.credit { margin-top: 22px; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--mist); }
.credit .lion { display: inline-block; font-size: 20px; animation: lionPulse 2.6s ease-in-out infinite; }
.credit b { font-family: var(--font-latin); font-weight: 900; letter-spacing: .16em; margin-inline-start: 4px;
  background: linear-gradient(100deg, var(--x6), var(--x1) 25%, #c9a2ff 50%, var(--x1) 75%, var(--x6)); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
@keyframes lionPulse { 50% { transform: scale(1.25) rotate(-6deg); filter: drop-shadow(0 0 10px rgba(var(--h), .9)); } }
.kbd { margin-top: 6px; text-align: center; font-size: 12.5px; color: rgba(166, 175, 205, .7); }
@media (hover: none) { .kbd { display: none; } }

@media (max-width: 560px) {
  .top { flex-wrap: wrap; justify-content: center; }
  .crest { display: none; }
  .top-actions .icon-btn { width: 40px; min-height: 40px; }
  .top-actions .btn.gold { padding: 8px 12px; font-size: 14px; }
}

/* ---------- speech bubble ---------- */
.say { max-height: 0; opacity: 0; overflow: hidden; font-size: 13.5px; font-weight: 700; color: var(--x2); transition: max-height .4s, opacity .4s, margin .4s; }
.say.show { max-height: 96px; line-height: 1.55; opacity: 1; margin-top: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(var(--a), .12); border: 1px solid rgba(var(--a), .32); }
.mini { border: 1px solid rgba(var(--a), .42); background: rgba(var(--a), .08); color: var(--x2); border-radius: 8px; padding: 3px 10px; font-family: var(--font-latin); font-weight: 700; font-size: 12px; letter-spacing: .1em; margin-inline-end: 10px; transition: background .2s; }
.mini:hover { background: rgba(var(--a), .22); }
.moves h2 .h2r { display: flex; align-items: center; }

/* ---------- level cards ---------- */
.lvls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lvls label { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: start; padding: 10px 12px; }
.lvls .lic { grid-row: 1 / 3; width: 42px; height: 42px; }
.lvls .lic svg { width: 100%; height: 100%; }
.lvls label b { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.lvls label small { font-size: 12px; opacity: .82; font-weight: 600; line-height: 1.35; }
.lvls .lv4 b::after { content: ' 🔥'; }
.lvls input:checked + label .lic svg { filter: drop-shadow(0 0 7px rgba(255, 255, 255, .6)); }

/* ---------- settings ---------- */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tchip { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(var(--a), .3); background: rgba(8, 12, 28, .6); font-weight: 700; color: var(--ivory); transition: all .2s; }
.tchip i { width: 100%; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tchip:hover { border-color: var(--x3); }
.tchip.on { border-color: var(--x2); box-shadow: 0 0 24px rgba(var(--a), .45); color: var(--x2); }
.sw { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 11px 4px; font-weight: 700; cursor: pointer; border-bottom: 1px solid rgba(var(--a), .12); }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { width: 48px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .1); position: relative; transition: background .25s; border: 1px solid rgba(var(--a), .38); flex: none; }
.sw i::after { content: ''; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--x2); transition: transform .25s; }
.sw input:checked + i { background: linear-gradient(90deg, var(--x7), var(--x5)); }
.sw input:checked + i::after { transform: translateX(-22px); }
.sw input:focus-visible + i { outline: 2px solid var(--x2); outline-offset: 3px; }

.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; padding: 10px 22px; border-radius: 12px; background: rgba(6, 10, 24, .94); border: 1px solid var(--x4); color: var(--x2); font-weight: 800; transition: all .35s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================== HOME ===================== */
.home { position: fixed; inset: 0; z-index: 70; display: flex; overflow-y: auto; padding: 28px 16px;
  background: radial-gradient(1000px 700px at 50% 15%, rgba(var(--a), .12), transparent 60%), radial-gradient(900px 600px at 50% 112%, rgba(var(--h), .10), transparent 60%), linear-gradient(180deg, rgba(3, 5, 13, .78), rgba(3, 5, 13, .93));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: homeIn 1s both; }
@keyframes homeIn { from { opacity: 0; } }
.home.leaving { animation: homeOut .62s cubic-bezier(.6, 0, .9, .4) both; pointer-events: none; }
@keyframes homeOut { to { opacity: 0; transform: scale(1.2); filter: blur(12px); } }
.home::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(440px 440px at var(--mx, 50%) var(--my, 40%), rgba(var(--a), .15), transparent 70%); }
.home-rays { position: fixed; inset: -45%; pointer-events: none; animation: spin 90s linear infinite;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 6%, rgba(var(--a), .09) 8%, transparent 11%, transparent 20%, rgba(var(--p), .06) 22%, transparent 25%, transparent 40%, rgba(var(--a), .08) 42%, transparent 45%, transparent 60%, rgba(var(--p), .05) 62%, transparent 65%, transparent 80%, rgba(var(--a), .08) 82%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, transparent 62%); }
@keyframes spin { to { transform: rotate(360deg); } }
.floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.fl { position: absolute; left: var(--x); top: var(--y); width: var(--s, 90px); height: var(--s, 90px); opacity: 0; animation: floaty var(--d, 14s) ease-in-out var(--dl, 0s) infinite; filter: drop-shadow(0 0 18px rgba(var(--a), .4)); }
.fl svg { width: 100%; height: 100%; }
@keyframes floaty { 0% { opacity: 0; transform: translateY(50px) rotate(-10deg); } 18%, 82% { opacity: .26; } 50% { transform: translateY(-30px) rotate(9deg); } 100% { opacity: 0; transform: translateY(50px) rotate(-10deg); } }

.home-inner { position: relative; z-index: 2; width: min(100%, 470px); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-crest { width: 112px; height: 102px; margin-bottom: 4px; filter: drop-shadow(0 0 28px rgba(var(--h), .75)); animation: crestFloat 5s ease-in-out infinite; }
.home-crest path, .home-crest circle { fill: none; stroke: url(#gStroke); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.home:not([hidden]) .home-crest path, .home:not([hidden]) .home-crest circle { animation: draw 2.2s .1s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes crestFloat { 50% { transform: translateY(-9px); } }
.home-eyebrow { margin: 0 0 2px; font-family: var(--font-latin); font-size: 12px; letter-spacing: .55em; padding-inline-start: .55em; color: var(--x4); direction: ltr; animation: rise .9s .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.home-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 16vw, 96px); line-height: 1.14; display: flex; gap: .26em; flex-wrap: wrap; justify-content: center; }
.home-title span { display: inline-block; background: linear-gradient(100deg, var(--x6), var(--x1) 25%, var(--x4) 45%, #fff 55%, var(--x6) 75%, var(--x3)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite, wordIn 1.2s cubic-bezier(.2, .9, .2, 1) both; filter: drop-shadow(0 0 22px rgba(var(--a), .55)); }
.home-title span:nth-child(2) { animation-delay: 0s, .25s; }
@keyframes wordIn { from { opacity: 0; transform: translateY(46px) scale(.7); filter: blur(14px); } }
.home-tag { margin: 4px 0 26px; color: var(--mist); font-size: 18px; font-weight: 600; animation: rise .9s .55s both; }

.home-menu { display: grid; gap: 14px; width: 100%; }
.hbtn { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; border-radius: 20px; text-align: start;
  border: 1px solid rgba(var(--a), .55); background: linear-gradient(160deg, rgba(26, 44, 92, .78), rgba(7, 12, 30, .92)); color: var(--x2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(var(--p), .25); transition: transform .25s, box-shadow .3s, border-color .3s; animation: rise .9s both; }
.hbtn.friend { animation-delay: .75s; }
.hbtn.bot { animation-delay: .9s; }
.hbtn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(var(--p), .38) 50%, transparent 65%); transform: translateX(-140%); animation: btnSweep 5s 2s ease-in-out infinite; pointer-events: none; }
@keyframes btnSweep { 0% { transform: translateX(-140%); } 30%, 100% { transform: translateX(140%); } }
.hbtn:hover { transform: translateY(-5px) scale(1.025); border-color: var(--x3); box-shadow: 0 26px 60px rgba(0, 0, 0, .6), 0 0 46px rgba(var(--a), .4); }
.hbtn:active { transform: scale(.985); }
.hbtn.bot { color: var(--x10); border-color: var(--x2); background: linear-gradient(180deg, var(--x3), var(--x5) 55%, var(--x7)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 42px rgba(var(--a), .38), inset 0 1px 0 rgba(255, 255, 255, .7); }
.hbtn b { display: block; font-family: var(--font-display); font-size: 29px; line-height: 1.2; }
.hbtn small { display: block; font-size: 14px; font-weight: 700; opacity: .8; margin-top: 2px; }
.hic { position: relative; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(0, 0, 0, .3); border: 1px solid rgba(var(--p), .32); }
.hbtn.bot .hic { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.hic svg { width: 44px; height: 44px; }
.hic.duo svg { position: absolute; width: 38px; height: 38px; }
.hic.duo svg:first-child { right: 3px; top: 3px; }
.hic.duo svg:last-child { left: 3px; bottom: 3px; }
.hresume { margin-top: 16px; border: 1px dashed rgba(var(--a), .65); background: rgba(var(--a), .09); color: var(--x2); padding: 12px 24px; border-radius: 14px; font-weight: 800; font-size: 16px; transition: all .25s; animation: rise .8s 1s both; }
.hresume:hover { background: rgba(var(--a), .2); transform: translateY(-2px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; animation: rise .9s 1.1s both; }
.chips span { padding: 5px 13px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--x3); border: 1px solid rgba(var(--a), .3); background: rgba(var(--a), .07); }
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 20px; animation: rise .9s 1.2s both; }
.stat { padding: 10px 4px; border-radius: 14px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(var(--a), .24); }
.stat b { display: block; font-family: var(--font-latin); font-size: 24px; color: var(--x2); line-height: 1.3; }
.stat small { font-size: 12.5px; color: var(--mist); font-weight: 700; }
.home-tools { display: flex; gap: 10px; margin-top: 20px; animation: rise .9s 1.3s both; }
.home .credit { animation: rise .9s 1.4s both; margin-bottom: 4px; }

/* ===== base ===== */
'+'.beams i{animation:none!important}.beams{opacity:.6}body.lite #ambient,body.lite .beams,body.lite .floaters{display:none}.piece{will-change:transform;touch-action:none}.btn,.hbtn,.seg label,.tchip{-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .3s,border-color .3s,background .3s}.btn:active,.hbtn:active,.seg label:active{transform:scale(.95)}.overlay:not([hidden]){animation:ovIn .35s ease both}.overlay:not([hidden]) .sheet{animation:shIn .55s cubic-bezier(.16,1.1,.3,1) both}@keyframes ovIn{from{opacity:0}}@keyframes shIn{from{opacity:0;transform:translateY(34px) scale(.94)}}.step:not([hidden]){animation:stIn .5s cubic-bezier(.16,1,.3,1) both;border:0;padding:0;margin:0 0 12px}@keyframes stIn{from{opacity:0;transform:translateX(-28px)}}.step legend{position:absolute;opacity:0;pointer-events:none}#grpLevel .seg label,#grpTime .seg label{flex:1 1 calc(50% - 8px);padding:16px 10px}#grpColor .seg label{flex:1 1 100%;padding:16px}.dots{display:flex;gap:8px;justify-content:center;margin:-6px 0 16px}.dots i{width:9px;height:9px;border-radius:9px;background:rgba(var(--a),.25);transition:all .4s cubic-bezier(.2,.9,.2,1)}.dots i.on{width:30px;background:var(--gold)}.dots i.done{background:var(--gold-lo)}#btnStart:not([hidden]){animation:stIn .5s both}body.nocoords #cfT,body.nocoords #cfB,body.nocoords #crL,body.nocoords #crR{display:none}@media (max-width:760px){*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}:root{--gut:10px}.app{padding-block:6px 20px}.top{min-height:50px}.crest{width:40px;height:38px}.eyebrow{display:none}h1{font-size:26px}.card{padding:10px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.45)}.kbd,.credit{display:none}.btnrow{display:grid!important;grid-template-columns:1fr}.moves ol{max-height:96px;overflow:auto}.btn{min-height:46px}.overlay{place-items:end center;padding:0}.sheet.panel,.sheet{border-radius:24px 24px 0 0;width:100%;max-height:92dvh;overflow:auto;padding-bottom:max(22px,env(safe-area-inset-bottom))}.home-title{font-size:clamp(40px,14vw,64px)}.hbtn{min-height:76px}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}'+'

/* ===== avfix ===== */
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== polish ===== */
/* ====== أداء: إلغاء الضبابية والفلاتر الثقيلة ====== */
*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html,body{overscroll-behavior:none}
button,.btn,.seg label{touch-action:manipulation}
.card{background:linear-gradient(160deg,rgba(20,32,70,.95),rgba(7,11,26,.97));box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(var(--p),.16)}
.overlay{background:radial-gradient(circle at 50% 38%,rgba(22,30,84,.92),rgba(3,2,8,.97))}
.promo{background:rgba(5,4,10,.84)}
.home{background:radial-gradient(1000px 700px at 50% 15%,rgba(var(--a),.14),transparent 60%),linear-gradient(180deg,rgba(3,5,13,.93),rgba(3,5,13,.98))}
.home-rays{will-change:transform;animation-duration:140s}
.home-title span{animation:wordIn 1s cubic-bezier(.2,.9,.2,1) both!important}
.home-title span:nth-child(2){animation-delay:.2s!important}
@keyframes wordIn{from{opacity:0;transform:translateY(34px) scale(.85)}}
.fl{filter:none}
.crest,.home-crest,.result-crest{filter:none}
h1{animation:none}
.frame::after{display:none}
.caps svg{filter:none}
.beams i:nth-child(2){display:none}
.lowfx .beams,.lowfx #ambient,.lowfx .home-rays,.lowfx .fl{display:none}
@keyframes boardIn{from{opacity:0;transform:translateY(22px) scale(.95)}}
@keyframes breathe{50%{transform:scale(1.05)}}
@keyframes selPulse{from{opacity:1}to{opacity:.72}}
@keyframes capRing{to{transform:scale(.92)}}
@keyframes dotIn{from{transform:scale(0)}60%{transform:scale(1.25)}}

/* ====== القطع: ظل أرضي خفيف بدل الفلتر + رفع ناعم ====== */
.piece{filter:none;contain:layout style}
.piece::before,.piece::after{content:'';position:absolute;pointer-events:none;z-index:0}
.piece::before{left:20%;right:20%;bottom:7%;height:12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 72%);transition:transform .22s cubic-bezier(.2,.9,.2,1),opacity .22s}
.piece::after{inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(var(--h),.42),transparent 66%);opacity:0;transition:opacity .22s}
.piece svg{position:relative;z-index:1;transition:transform .24s cubic-bezier(.2,.9,.2,1)}
.piece.sel svg{transform:translateY(-8%) scale(1.07)}
.piece.sel::before{transform:translateY(70%) scale(1.25);opacity:.55}
.piece.sel::after{opacity:.8}
.piece.lifted{filter:none}
.piece.lifted svg{transform:translateY(-4%) scale(1.05);transition:none}
.piece.lifted::before{transform:translateY(120%) scale(1.45);opacity:.4}
.piece.lifted::after{opacity:1}
.piece.land svg{animation:landSq .32s cubic-bezier(.2,.9,.2,1)}
@keyframes landSq{0%{transform:scale(1.12,.86) translateY(6%)}55%{transform:scale(.97,1.05)}100%{transform:none}}
.glide .piece{transition:transform .6s cubic-bezier(.5,0,.2,1)}

/* ====== الرقعة: تظليل أنعم ====== */
.sq.sel::before{animation:selPulse 1.1s ease-in-out infinite alternate;box-shadow:inset 0 0 0 3px var(--gold-pale),inset 0 0 22px rgba(var(--p),.7)}
.sq.hint::before{animation:selPulse .9s ease-in-out infinite alternate;box-shadow:inset 0 0 0 3px var(--sapphire),inset 0 0 18px rgba(127,184,255,.6)}
.sq.tg::after{box-shadow:0 0 10px 1px rgba(var(--h),.6)}
.sq.tg.cap::after{box-shadow:0 0 10px 1px rgba(var(--h),.55),inset 0 0 10px rgba(var(--h),.45)}
.sq.hov::before{box-shadow:inset 0 0 0 4px var(--x2),inset 0 0 22px rgba(var(--p),.8)}
.rip::before{box-shadow:0 0 10px var(--gold);animation-duration:.6s}
.rip.ruby::before{box-shadow:0 0 12px var(--ruby)}
.sq.last::before{box-shadow:inset 0 0 0 2px rgba(var(--h),.45),inset 0 0 12px rgba(var(--l),.4);transition:opacity .25s}

/* ====== تصميم أرقى: بطاقات وأزرار وسجل ====== */
.boot .card{animation:cardIn .7s cubic-bezier(.2,.9,.2,1) both}
.boot .moves{animation-delay:.1s}.boot .opp{animation-delay:.18s}.boot .controls{animation-delay:.26s}.boot .me{animation-delay:.34s}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}}
.card::before{border-color:rgba(var(--a),.14)}
.player{transition:border-color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.9,.2,1)}
.player.active{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(var(--h),.35),0 0 26px rgba(var(--a),.2),inset 0 1px 0 rgba(var(--p),.22)}
.player.active .avatar{box-shadow:0 0 0 4px rgba(var(--h),.2),0 6px 16px rgba(0,0,0,.55)}
.pulse{box-shadow:0 0 8px var(--gold)}
.btn{border-radius:12px;transition:transform .2s cubic-bezier(.2,.9,.2,1),box-shadow .25s,border-color .25s,background .25s}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--a),.2)}
.btn:active:not(:disabled){transform:translateY(0) scale(.96)}
.btn.gold{box-shadow:0 6px 18px rgba(var(--a),.26),inset 0 1px 0 var(--x1)}
.frame{box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 56px rgba(var(--a),.14),inset 0 2px 0 rgba(var(--p),.7),inset 0 -3px 6px rgba(4,24,44,.7)}
#moves li span.mv{transition:background .25s,color .25s}
#moves li span.mv.cur{animation:moveIn .3s ease both}
.toast{transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.2,1)}
.overlay:not([hidden]){animation:ovIn .25s ease both}
.overlay:not([hidden]) .sheet{animation:shIn .4s cubic-bezier(.2,.9,.2,1) both}
.step:not([hidden]){animation:stIn .35s cubic-bezier(.2,.9,.2,1) both}
.banner b{filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));animation-duration:1.3s}
.banner.ruby b{filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
#resTitle{filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.board-shake.shake{animation-duration:.26s}
@media (hover:none){.btn:hover:not(:disabled){transform:none;box-shadow:none}}

/* ===== luxury ===== */
/* ================= الصفحة الرئيسية الملكية ================= */
.home{background:radial-gradient(1100px 760px at 50% 10%,rgba(var(--a),.16),transparent 62%),radial-gradient(800px 500px at 50% 115%,rgba(var(--h),.14),transparent 60%),linear-gradient(180deg,rgba(2,4,12,.94),rgba(3,5,14,.985))}
.home-halo{position:fixed;left:50%;top:12%;width:min(980px,130vw);aspect-ratio:1;margin-left:calc(min(980px,130vw) / -2);margin-top:-300px;pointer-events:none;background:radial-gradient(circle,rgba(var(--a),.26) 0%,rgba(var(--a),.08) 38%,transparent 64%);animation:haloBreath 7s ease-in-out infinite;will-change:transform,opacity}
@keyframes haloBreath{50%{opacity:.6;transform:scale(1.1)}}
.home-floor{position:fixed;left:-25%;right:-25%;bottom:-6%;height:44%;pointer-events:none;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:conic-gradient(rgba(var(--p),.13) 25%,transparent 0 50%,rgba(var(--p),.13) 0 75%,transparent 0) 0 0/140px 140px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 88%);mask-image:linear-gradient(to top,#000 0%,transparent 88%);animation:fadeIn 2s .4s both}
.home-stars{position:fixed;inset:0;pointer-events:none}
.home-stars i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--x2);box-shadow:0 0 6px 1px rgba(var(--h),.8);opacity:0;animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
.home-frame{position:fixed;inset:16px;border-radius:24px;pointer-events:none;border:1px solid rgba(var(--a),.22);animation:frameFade 1.6s .2s cubic-bezier(.2,.9,.2,1) both;
  --g:var(--x3);
  background:
   linear-gradient(var(--g),var(--g)) top right/46px 2px no-repeat,linear-gradient(var(--g),var(--g)) top right/2px 46px no-repeat,
   linear-gradient(var(--g),var(--g)) top left/46px 2px no-repeat,linear-gradient(var(--g),var(--g)) top left/2px 46px no-repeat,
   linear-gradient(var(--g),var(--g)) bottom right/46px 2px no-repeat,linear-gradient(var(--g),var(--g)) bottom right/2px 46px no-repeat,
   linear-gradient(var(--g),var(--g)) bottom left/46px 2px no-repeat,linear-gradient(var(--g),var(--g)) bottom left/2px 46px no-repeat}
.home-frame::before{content:'';position:absolute;inset:7px;border-radius:18px;border:1px solid rgba(var(--a),.1)}
@keyframes frameFade{from{opacity:0;transform:scale(1.03)}}
.floaters{transform:translate3d(calc((var(--mx,50vw) - 50vw) * -.02),calc((var(--my,50vh) - 50vh) * -.02),0);transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.fl{filter:none}
.home-inner{padding-top:34px;width:min(100%,500px)}
.crest-ring{position:absolute;top:-30px;left:50%;width:236px;height:236px;margin-left:-118px;pointer-events:none;opacity:.8;animation:fadeIn 2s .3s both}
.crest-ring .r1,.crest-ring .r2{transform-box:fill-box;transform-origin:center}
.crest-ring .r1{animation:spin 70s linear infinite}
.crest-ring .r2{animation:spin 48s linear infinite reverse}
.home-crest{position:relative;z-index:1;width:124px;height:113px;margin-bottom:6px}
.home-eyebrow{color:var(--x3);font-size:12px;letter-spacing:.62em}
.home-title{position:relative;font-size:clamp(64px,19vw,118px);line-height:1.1}
.home-title span{background:linear-gradient(180deg,#fff 0%,var(--x2) 30%,var(--x4) 56%,var(--x7) 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleWipe 1.2s cubic-bezier(.2,.9,.2,1) both!important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.home-title span:nth-child(2){animation-delay:.22s!important}
@keyframes titleWipe{from{opacity:0;transform:translateY(34px);clip-path:inset(-30% -10% -30% 110%)}to{opacity:1;transform:none;clip-path:inset(-30% -10% -30% -10%)}}
.glint{position:absolute;left:10%;top:22%;width:54px;height:54px;margin:-27px 0 0 -27px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 9%,transparent 38%),linear-gradient(90deg,transparent 28%,#fff 50%,transparent 72%) center/100% 2px no-repeat,linear-gradient(0deg,transparent 28%,#fff 50%,transparent 72%) center/2px 100% no-repeat;
  animation:glint 5.5s 2.2s ease-in-out infinite}
@keyframes glint{0%,60%,100%{opacity:0;transform:scale(.2) rotate(0)}74%{opacity:1;transform:scale(1) rotate(45deg)}88%{opacity:0;transform:scale(.3) rotate(90deg)}}
.home-tag{font-size:19px;color:var(--x3);opacity:.9;margin:2px 0 14px}
.orn{display:flex;align-items:center;gap:14px;width:min(100%,360px);margin:0 0 26px;animation:rise .9s .65s both}
.orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--x4))}
.orn i:last-child{transform:scaleX(-1)}
.orn b{color:var(--x3);font-size:22px;line-height:1;text-shadow:0 0 14px rgba(var(--h),.9)}
.home-menu{gap:16px}
.hbtn{grid-template-columns:auto 1fr auto;gap:18px;padding:20px 22px;border-radius:24px;border:1.5px solid transparent;
  background:linear-gradient(160deg,rgba(24,40,88,.92),rgba(6,10,28,.97)) padding-box,linear-gradient(135deg,var(--x3),rgba(var(--a),.2) 42%,var(--x6)) border-box;
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(var(--p),.22);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s}
.hbtn.bot{color:var(--x10);background:linear-gradient(180deg,var(--x2),var(--x4) 45%,var(--x6)) padding-box,linear-gradient(135deg,#fff,var(--x3),var(--x7)) border-box;box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 40px rgba(var(--a),.34),inset 0 1px 0 rgba(255,255,255,.75)}
.hbtn:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 26px 56px rgba(0,0,0,.6),0 0 50px rgba(var(--a),.42)}
.hbtn b{font-size:30px}
.hic{width:68px;height:68px;border-radius:20px;transition:transform .45s cubic-bezier(.2,1.3,.4,1)}
.hbtn:hover .hic{transform:rotate(-7deg) scale(1.1)}
.hbtn .go{font-style:normal;font-size:30px;line-height:1;opacity:.6;transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .3s}
.hbtn:hover .go{transform:translateX(-10px);opacity:1}
.hresume{border-radius:16px;border:1px solid rgba(var(--a),.6);background:linear-gradient(180deg,rgba(var(--a),.16),rgba(var(--a),.05))}
.chips{gap:7px;margin-top:24px}
.chips span{background:rgba(var(--a),.06);border-color:rgba(var(--a),.24);color:var(--x3)}
.home-stats{gap:0;padding:6px;border-radius:20px;border:1px solid rgba(var(--a),.28);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.4));box-shadow:inset 0 1px 0 rgba(var(--p),.12)}
.stat{position:relative;background:none;border:0;border-radius:0}
.stat+.stat::before{content:'';position:absolute;right:0;top:18%;bottom:18%;width:1px;background:linear-gradient(transparent,rgba(var(--a),.4),transparent)}
.stat b{background:linear-gradient(180deg,#fff,var(--x4));-webkit-background-clip:text;background-clip:text;color:transparent}
.home-tools .btn{border-radius:14px}
@media (max-width:760px){.home-frame{inset:8px;border-radius:18px}.crest-ring{width:200px;height:200px;margin-left:-100px;top:-18px}.hbtn{padding:16px 16px}.hbtn b{font-size:26px}.hic{width:58px;height:58px}.home-floor{height:34%}}
.lowfx .home-stars,.lowfx .home-halo,.lowfx .crest-ring .r2{display:none}

/* ================= أنيميشن الشطرنج الفخم ================= */
.spop{position:absolute;width:12.5%;text-align:center;z-index:12;pointer-events:none;font-family:var(--font-latin);font-weight:900;font-size:clamp(15px,2.6vw,24px);color:#fff;text-shadow:0 0 10px rgba(var(--h),.95),0 2px 5px rgba(0,0,0,.8);animation:spop 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes spop{0%{opacity:0;transform:translateY(20%) scale(.5)}20%{opacity:1;transform:translateY(-20%) scale(1.25)}100%{opacity:0;transform:translateY(-130%) scale(1)}}
.bsweep{position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);animation:bsw 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes bsw{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.frame.alert{animation:frameAlert 1.1s ease-out}
@keyframes frameAlert{0%,100%{box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 56px rgba(var(--a),.14),inset 0 2px 0 rgba(var(--p),.7),inset 0 -3px 6px rgba(4,24,44,.7)}30%{box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 90px rgba(208,37,72,.75),inset 0 2px 0 rgba(255,150,170,.7),inset 0 -3px 6px rgba(80,4,20,.7)}}
.sq.tg::after{animation:dotIn .4s cubic-bezier(.2,1.5,.4,1) both}
.piece.land svg{animation:landSq .38s cubic-bezier(.2,.9,.2,1)}
.board::after{background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.3) 100%)}

/* ===== epic ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.home{scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.home-inner{width:min(100%,1040px)}
.home-menu,.chips,.home-stats{width:min(100%,470px)}
.home::before{content:'';position:fixed;inset:0;background:#03050d;z-index:-1;pointer-events:none}
.home-aurora{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.home-aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.3;mix-blend-mode:screen;animation:aur 24s ease-in-out infinite alternate}
.home-aurora i:nth-child(1){left:-20vmax;top:-18vmax;background:rgb(var(--a))}
.home-aurora i:nth-child(2){right:-24vmax;top:10vh;background:#8a4bff;animation-duration:31s}
.home-aurora i:nth-child(3){left:10vw;bottom:-34vmax;background:rgb(var(--h));animation-duration:37s;opacity:.2}
@keyframes aur{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
.hprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:5;transform-origin:100% 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--x3),var(--x6),#fff);box-shadow:0 0 14px rgba(var(--a),.9)}
.home-title{filter:drop-shadow(0 0 28px rgba(var(--a),.5))}
.hbtn.bot::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 62%,#fff 82%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:angS 3.4s linear infinite}
@keyframes angS{to{--ang:360deg}}
.hcue{margin-top:30px;display:grid;justify-items:center;gap:8px;background:none;border:0;color:var(--x3);font-weight:800;font-size:14px;letter-spacing:.06em;cursor:pointer;animation:rise .9s 1.5s both}
.hcue i{width:24px;height:38px;border:2px solid rgba(var(--a),.7);border-radius:14px;position:relative;box-shadow:0 0 16px rgba(var(--a),.4)}
.hcue i::after{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:var(--x2);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.hfeat{width:100%;margin-top:70px;display:grid;gap:30px;justify-items:center}
.hsec{margin:30px 0 0;font-family:var(--font-display);font-size:clamp(32px,6.4vw,58px);line-height:1.2;text-align:center;background:linear-gradient(100deg,var(--x4),#fff 45%,var(--x5));-webkit-background-clip:text;background-clip:text;color:transparent}
.hsec small{display:block;font-family:var(--font-latin);font-size:12px;letter-spacing:.5em;color:var(--x4);-webkit-text-fill-color:var(--x4);margin-bottom:8px;direction:ltr}
.hsub{margin:-14px 0 0;color:var(--mist);font-weight:700;font-size:17px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;width:100%}
.fcard{--sx:50%;--sy:0%;position:relative;overflow:hidden;text-align:start;padding:24px 22px;border-radius:22px;border:1px solid rgba(var(--a),.28);background:radial-gradient(260px 200px at var(--sx) var(--sy),rgba(var(--a),.2),transparent 70%),linear-gradient(180deg,rgba(22,36,82,.62),rgba(6,10,26,.8));box-shadow:0 18px 44px rgba(0,0,0,.45)}
.fcard:hover{border-color:var(--x3);transform:translateY(-6px)!important}
.fic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;font-size:28px;margin-bottom:14px;background:rgba(var(--a),.12);border:1px solid rgba(var(--a),.5);box-shadow:0 0 26px rgba(var(--a),.35);animation:icoF 4s ease-in-out infinite}
@keyframes icoF{50%{transform:translateY(-5px) rotate(-4deg)}}
.fcard h3{margin:0 0 6px;font-family:var(--font-display);font-size:24px;color:var(--x2)}
.fcard p{margin:0;color:var(--mist);font-weight:600;line-height:1.7}
.rv{opacity:0;transform:translateY(54px) scale(.95);filter:blur(10px);transition:opacity .9s cubic-bezier(.2,.9,.2,1) calc(var(--i,0)*110ms),transform .9s cubic-bezier(.2,.9,.2,1) calc(var(--i,0)*110ms),filter .9s calc(var(--i,0)*110ms),border-color .3s}
.rv[data-fx=l]{transform:translateX(-80px) rotate(-3deg)}.rv[data-fx=r]{transform:translateX(80px) rotate(3deg)}.rv[data-fx=z]{transform:scale(.7)}
.rv:not(.in){transition-duration:.3s;transition-delay:0s}
.rv.in{opacity:1;transform:none;filter:none}
.ladder{display:flex;align-items:flex-end;justify-content:center;gap:clamp(5px,1.8vw,16px);width:100%;min-height:290px}
.lad{flex:1;max-width:110px;min-width:0;height:var(--h);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:10px 4px;border-radius:16px 16px 6px 6px;background:linear-gradient(180deg,rgba(var(--c),.34),rgba(var(--c),.05));border:1px solid rgba(var(--c),.7);box-shadow:0 0 30px rgba(var(--c),.3)}
.lad svg{width:min(56px,72%);aspect-ratio:1;filter:drop-shadow(0 0 10px rgba(var(--c),.8))}
.lad b{font-family:var(--font-display);font-size:clamp(11px,3vw,17px);color:rgb(var(--c));margin-top:4px;text-align:center}
.lad small{font-size:11px;color:var(--mist);font-weight:700}
.hbig{padding:18px 44px;border-radius:99px;border:1px solid var(--x2);font-family:var(--font-display);font-size:clamp(22px,5vw,30px);font-weight:700;color:var(--x10);background:linear-gradient(180deg,var(--x3),var(--x5) 55%,var(--x7));box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 54px rgba(var(--a),.55);animation:hbig 2.4s ease-in-out infinite}
.hbig:active{transform:scale(.95)}
@keyframes hbig{50%{box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 90px rgba(var(--a),.9);transform:scale(1.04)}}
.hcta{margin:10px 0 24px}
/* ---- slider الصعوبة ---- */
.lvl{--lc:79,216,255;--p:.33;display:grid;gap:14px}
.lv-hero{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.lv-ico{width:78px;height:78px;display:grid;place-items:center;border-radius:24px;background:radial-gradient(circle at 50% 28%,rgba(var(--lc),.38),rgba(var(--lc),.06));border:1px solid rgba(var(--lc),.8);box-shadow:0 0 36px rgba(var(--lc),.5),inset 0 0 22px rgba(var(--lc),.22);transition:box-shadow .4s,border-color .4s,background .4s}
.lv-ico svg{width:60px;height:60px;filter:drop-shadow(0 0 10px rgba(var(--lc),.9))}
.lv-ico.pop{animation:lvPop .5s cubic-bezier(.2,1.6,.3,1)}
@keyframes lvPop{0%{transform:scale(.6) rotate(-14deg)}100%{transform:none}}
.lv-txt b{display:block;font-family:var(--font-display);font-size:30px;line-height:1.1;color:rgb(var(--lc));text-shadow:0 0 20px rgba(var(--lc),.6);transition:color .3s}
.lv-txt small{display:block;margin-top:4px;color:var(--mist);font-weight:700;font-size:13.5px;line-height:1.5}
.lv-elo{text-align:center;min-width:64px}.lv-elo span{display:block;font-family:var(--font-latin);font-weight:900;font-size:28px;color:#fff;text-shadow:0 0 18px rgba(var(--lc),.8)}.lv-elo em{font-style:normal;font-size:10px;color:var(--mist);font-weight:700}
.lv-slider{position:relative;height:52px;margin-top:4px}
.lv-track{position:absolute;left:0;right:0;top:50%;height:12px;margin-top:-6px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 2px 7px rgba(0,0,0,.7);overflow:hidden}
.lv-fill{position:absolute;top:0;bottom:0;right:0;width:calc(var(--p)*(100% - 32px) + 16px);background:linear-gradient(270deg,rgb(var(--lc)),rgba(var(--lc),.35));box-shadow:0 0 20px rgba(var(--lc),.9);transition:width .28s cubic-bezier(.2,.9,.2,1)}
.lv-ticks i{position:absolute;top:50%;right:calc(var(--k)*(100% - 32px) + 16px);width:8px;height:8px;margin-top:-4px;border-radius:50%;transform:translateX(50%);background:rgba(255,255,255,.22);transition:background .3s,box-shadow .3s}
.lv-ticks i::after{content:attr(data-n);position:absolute;top:22px;left:50%;transform:translateX(-50%);font:700 11px var(--font-latin);color:var(--mist)}
.lv-ticks i.on{background:#fff;box-shadow:0 0 10px rgba(var(--lc),1)}.lv-ticks i.cur::after{color:rgb(var(--lc))}
.lv-slider input{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:grab;touch-action:pan-y;outline:none}
.lv-slider input::-webkit-slider-runnable-track{background:transparent;height:100%}
.lv-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--lc)) 62%);border:2px solid #fff;box-shadow:0 0 0 6px rgba(var(--lc),.28),0 0 28px rgba(var(--lc),1),0 6px 14px rgba(0,0,0,.5);animation:thP 1.8s ease-in-out infinite}
.lv-slider input::-moz-range-track{background:transparent}
.lv-slider input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--lc)) 62%);border:2px solid #fff;box-shadow:0 0 0 6px rgba(var(--lc),.28),0 0 28px rgba(var(--lc),1)}
.lv-slider input:active{cursor:grabbing}
@keyframes thP{50%{box-shadow:0 0 0 12px rgba(var(--lc),.1),0 0 38px rgba(var(--lc),1),0 6px 14px rgba(0,0,0,.5)}}
.lv-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;font-weight:800;color:var(--mist)}
.lv-bars{display:grid;gap:8px}.lb{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;font-size:13px;font-weight:700;color:var(--mist)}
.lb b{height:7px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;display:block}.lb i{display:block;height:100%;border-radius:9px;background:linear-gradient(270deg,rgb(var(--lc)),rgba(var(--lc),.4));box-shadow:0 0 12px rgba(var(--lc),.8);transition:width .5s cubic-bezier(.2,.9,.2,1)}
.lv-feats{display:flex;flex-wrap:wrap;gap:7px}
.ft{padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:800;color:rgba(255,255,255,.35);border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.03);transform:scale(.94);transition:all .45s cubic-bezier(.2,1.5,.3,1)}
.ft.on{color:#fff;border:1px solid rgba(var(--lc),.8);background:rgba(var(--lc),.16);box-shadow:0 0 14px rgba(var(--lc),.35);transform:none}
.lvl.max .lv-ico{animation:maxP .9s ease-in-out infinite alternate}.lvl.max .lv-txt b{animation:maxT .12s linear 4}
@keyframes maxP{to{box-shadow:0 0 70px rgba(255,120,30,.9),inset 0 0 30px rgba(255,170,40,.4);transform:scale(1.05)}}
@keyframes maxT{25%{transform:translateX(2px)}75%{transform:translateX(-2px)}}
.overlay{align-items:start}.overlay .sheet{margin-block:auto}
.sheet .acts .btn.menu{border-color:var(--x4)}
@media(max-width:600px){
 .home{padding:18px 12px 30px}.home-frame{inset:6px}.hfeat{margin-top:46px}.fcard{padding:18px}.hsub{font-size:15px}
 .overlay{padding:10px}.sheet.panel{padding:20px 14px 16px}.lv-ico{width:62px;height:62px;border-radius:19px}.lv-ico svg{width:46px;height:46px}.lv-txt b{font-size:24px}.lv-txt small{font-size:12.5px}.lv-elo span{font-size:22px}.lv-elo{min-width:52px}
 .lv-hero{gap:10px}.lb{grid-template-columns:80px 1fr}.ladder{min-height:250px}.home-aurora i{filter:blur(60px)}.sheet .acts .btn{flex:1 1 40%}
}
.lowfx .home-aurora,body.lite .home-aurora{display:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none}.hbig,.fic,.hcue i::after,.hbtn.bot::after{animation:none}}

/* ===== histcss ===== */
#histModal{z-index:95;align-items:start}
.hist-sheet{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);width:min(100%,620px)}
.hs-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hsc{text-align:center;padding:10px 4px;border-radius:14px;border:1px solid rgba(var(--a),.3);background:rgba(var(--a),.07)}
.hsc b{display:block;font:900 24px var(--font-latin);color:#fff}.hsc small{font-size:12px;font-weight:800;color:var(--mist)}
.hsc.win{border-color:rgba(80,230,150,.5);background:rgba(80,230,150,.08)}.hsc.win b{color:#6ef0a8}
.hsc.loss{border-color:rgba(255,90,110,.5);background:rgba(255,90,110,.08)}.hsc.loss b{color:#ff7a8e}
.hsc.draw b{color:#ffd36b}
.hs-filters{display:flex;gap:7px;overflow-x:auto;padding:12px 2px 8px;scrollbar-width:none}.hs-filters::-webkit-scrollbar{display:none}
.hf{flex:none;padding:6px 15px;border-radius:99px;font-weight:800;font-size:13.5px;color:var(--x3);background:rgba(var(--a),.07);border:1px solid rgba(var(--a),.3);transition:all .25s}
.hf.on{color:var(--x10);background:linear-gradient(180deg,var(--x3),var(--x5));border-color:var(--x2);box-shadow:0 0 18px rgba(var(--a),.5)}
.hs-list{display:grid;gap:10px;overflow-y:auto;min-height:120px;flex:1;padding:4px 2px 8px;overscroll-behavior:contain}
.hi{--hc:var(--a);border-radius:16px;border:1px solid rgba(var(--hc),.35);background:linear-gradient(180deg,rgba(18,30,70,.6),rgba(6,10,26,.8));overflow:hidden;animation:hiIn .55s cubic-bezier(.2,.9,.2,1) calc(var(--i)*55ms) both}
.hi.win{--hc:80,230,150}.hi.loss{--hc:255,90,110}.hi.draw{--hc:255,211,107}
@keyframes hiIn{from{opacity:0;transform:translateY(22px) scale(.97)}}
.hi-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;padding:12px 14px;cursor:pointer}
.hbadge{min-width:78px;text-align:center;padding:6px 10px;border-radius:12px;font-weight:900;font-size:13.5px;color:rgb(var(--hc));background:rgba(var(--hc),.14);border:1px solid rgba(var(--hc),.6);box-shadow:0 0 14px rgba(var(--hc),.3)}
.hi-t b{display:block;font-size:15.5px;color:var(--ivory)}.hi-t small{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--mist);line-height:1.5}
.hi-ch{font-style:normal;color:var(--x3);font-size:20px;transition:transform .35s}.hi.open .hi-ch{transform:rotate(180deg)}
.hi-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.9,.2,1)}.hi.open .hi-body{grid-template-rows:1fr}
.hi-in{overflow:hidden;min-height:0;padding:0 14px}.hi.open .hi-in{padding-bottom:12px}
.hi-mv{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.35);font:600 13px/1.8 var(--font-latin);color:var(--x2);max-height:150px;overflow:auto;text-align:left;word-break:break-word}
.hi-in .acts{margin:0;display:flex;gap:8px;justify-content:flex-start;flex-wrap:nowrap}.mini2{padding:8px 16px;font-size:13px;line-height:1.4;flex:1 1 0;min-height:38px}.hi.open .hi-in{padding-bottom:16px}
.hs-empty{display:grid;justify-items:center;gap:4px;padding:34px 10px;color:var(--mist)}.hs-empty span{font-size:46px;color:var(--x4);animation:icoF 3s ease-in-out infinite}.hs-empty b{color:var(--x2);font-size:17px}.hs-empty small{font-weight:700}
.hist-sheet .acts{margin-top:8px}
.hbtn.hist{animation-delay:1.05s}
@media(max-width:600px){.hist-sheet{padding:18px 12px 14px}.hbadge{min-width:64px;font-size:12.5px;padding:5px 6px}.hi-head{gap:9px;padding:11px 10px}.hs-sum{gap:6px}}

/* ===== rvcss ===== */
.review{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom,0px));top:auto;transform:translateX(-50%);z-index:50;width:min(760px,calc(100% - 16px));max-height:min(46vh,430px);overflow:auto;padding:9px 12px 11px;border-radius:20px;border:1px solid rgba(var(--a),.5);background:linear-gradient(180deg,rgba(14,24,58,.96),rgba(4,7,18,.98));box-shadow:0 -10px 50px rgba(0,0,0,.6),0 0 40px rgba(var(--a),.25);display:grid;gap:8px;animation:rvIn .5s cubic-bezier(.2,1,.3,1) both;scrollbar-width:thin}
.review[hidden]{display:none}
.review[data-dock="top"]{top:max(8px,env(safe-area-inset-top,0px));bottom:auto;box-shadow:0 10px 50px rgba(0,0,0,.6),0 0 40px rgba(var(--a),.25);animation-name:rvInTop}
.review[data-dock="float"]{transform:none;bottom:auto;width:min(440px,calc(100% - 16px));max-height:72vh;animation:rvFloatIn .3s ease both;box-shadow:0 18px 60px rgba(0,0,0,.75),0 0 40px rgba(var(--a),.3)}
@keyframes rvIn{from{opacity:0;transform:translate(-50%,40px)}}
@keyframes rvInTop{from{opacity:0;transform:translate(-50%,-40px)}}
@keyframes rvFloatIn{from{opacity:0;transform:scale(.96)}}
body[data-rvdock="bottom"].reviewing .app{padding-bottom:calc(var(--rvh,260px) + 18px)}
body[data-rvdock="top"].reviewing .app{padding-top:calc(var(--rvh,260px) + 18px)}
body[data-rvdock="float"].reviewing .app{padding-bottom:30px}
/* الرقعة تتصغّر تلقائيًا لتبقى كلها ظاهرة فوق/تحت اللوحة */
body.reviewing[data-rvdock="bottom"] .stage,body.reviewing[data-rvdock="top"] .stage{--rvfit:max(240px,calc(100dvh - var(--rvh,260px) - 110px - 2 * var(--fr)));--bs:min(calc(100vw - 2 * var(--gut) - 2 * var(--fr)),640px,var(--rvfit))}
@media (min-width:760px){body.reviewing[data-rvdock="bottom"] .stage,body.reviewing[data-rvdock="top"] .stage{--bs:min(calc(100vw - 2 * var(--gut) - 2 * var(--fr)),660px,var(--rvfit))}}
@media (min-width:1180px){body.reviewing[data-rvdock="bottom"] .stage,body.reviewing[data-rvdock="top"] .stage{--rvfit:max(260px,calc(100dvh - var(--rvh,260px) - 100px - 2 * var(--fr)));--bs:min(max(360px,calc(100dvh - 170px - 2 * var(--fr))),calc(100vw - 760px),720px,var(--rvfit))}}
@media (max-width:1179px){body.reviewing .opp,body.reviewing .me,body.reviewing .controls{display:none}}
.rv-top{display:flex;align-items:center;gap:8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.rv-top:active{cursor:grabbing}
.rv-tag{font-family:var(--font-display);font-size:19px;color:var(--x3)}.rv-pos{flex:1;color:var(--mist);font-weight:800;font-size:13.5px}
.rv-ic{width:36px;height:32px;flex:none;border-radius:10px;font-weight:900;font-size:16px;line-height:1;color:var(--x2);background:rgba(var(--a),.12);border:1px solid rgba(var(--a),.45);cursor:pointer;transition:transform .2s,background .2s}.rv-ic:hover{background:rgba(var(--a),.25)}.rv-ic:active{transform:scale(.92)}
.rv-exit{padding:7px 14px;border-radius:99px;font-weight:900;font-size:14px;color:#fff;background:linear-gradient(180deg,#ff5a6e,#c41f3d);border:1px solid #ff9aa8;box-shadow:0 0 18px rgba(255,80,100,.45);cursor:pointer}
.rv-coach{--vc:var(--a);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:9px 12px;border-radius:16px;border:1px solid rgba(var(--vc),.55);background:rgba(var(--vc),.1);transition:all .3s}
.rv-badge{min-width:76px;text-align:center;padding:9px 8px;border-radius:13px;font-weight:900;font-size:14px;color:rgb(var(--vc));background:rgba(var(--vc),.16);border:1px solid rgba(var(--vc),.7);box-shadow:0 0 18px rgba(var(--vc),.4)}
.rv-body b{display:block;font-size:16px;color:var(--ivory)}.rv-body p{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:var(--mist);font-weight:700}.rv-body .rv-best{color:var(--x2);font-weight:900}.rv-body .rv-best:empty{display:none}
.rv-coach.loading .rv-badge{animation:rvPulse 1s ease-in-out infinite}@keyframes rvPulse{50%{opacity:.35}}
.c-best,.v-best{--vc:110,240,170}.c-great,.v-great{--vc:120,220,255}.c-good,.v-good{--vc:170,230,120}.c-inacc,.v-inacc{--vc:255,211,107}.c-mistake,.v-mistake{--vc:255,150,60}.c-blunder,.v-blunder{--vc:255,80,100}
#moves .mv{cursor:pointer}
#moves .mv[class*="v-"]::before{content:'';display:inline-block;width:7px;height:7px;margin-inline-end:5px;border-radius:50%;background:rgb(var(--vc));box-shadow:0 0 6px rgb(var(--vc))}
.rv-evalrow{display:flex;align-items:center;gap:10px}.rv-evalrow small{min-width:118px;font-weight:800;color:var(--mist);font-size:12.5px}
.rv-bar{flex:1;height:9px;border-radius:9px;background:#0a0d18;border:1px solid rgba(255,255,255,.18);overflow:hidden;direction:ltr}.rv-bar i{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,#fff,#cfd8ff);transition:width .5s cubic-bezier(.2,.9,.2,1)}
.rv-nav{display:grid;grid-template-columns:1fr 1.2fr 1.4fr 1fr;gap:7px}
.rv-nav button{padding:11px 4px;border-radius:13px;font-weight:900;font-size:14px;color:var(--x2);background:rgba(var(--a),.1);border:1px solid rgba(var(--a),.45);cursor:pointer;transition:transform .2s,opacity .2s}
.rv-nav button.main{color:var(--x10);background:linear-gradient(180deg,var(--x3),var(--x5));border-color:var(--x2)}
.rv-nav button:active{transform:scale(.94)}.rv-nav button:disabled{opacity:.3;pointer-events:none}
.rv-sum{text-align:center;font-size:12.5px;font-weight:800;color:var(--x3);white-space:pre-line;line-height:1.6}.rv-sum:empty{display:none}
.review.min{gap:6px;padding-bottom:9px}
.review.min .rv-coach{grid-template-columns:1fr;padding:6px 12px}
.review.min .rv-badge,.review.min .rv-body p,.review.min .rv-evalrow,.review.min .rv-sum{display:none}
.review.min .rv-nav button{padding:8px 4px}
/* تضليل الحركة: مربع الانطلاق خفيف ومربع الوصول أوضح — أزرق عند الرجوع للخلف */
.sq.rvf::before{inset:0;background:rgba(var(--l),.14);box-shadow:inset 0 0 0 2px rgba(var(--l),.45);animation:rvLeave .8s ease-out both}
.sq.rvt:not(.chk)::before{inset:0;background:rgba(var(--h),.30);box-shadow:inset 0 0 0 3px rgba(var(--h),.85),inset 0 0 22px rgba(var(--h),.55);animation:rvArrive .9s cubic-bezier(.2,1.2,.4,1) both}
.sq.rvf.back::before{background:rgba(127,184,255,.12);box-shadow:inset 0 0 0 2px rgba(127,184,255,.45)}
.sq.rvt.back:not(.chk)::before{background:rgba(127,184,255,.28);box-shadow:inset 0 0 0 3px rgba(127,184,255,.9),inset 0 0 22px rgba(127,184,255,.55)}
@keyframes rvArrive{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes rvLeave{0%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.piece.rvpop{animation:rvGlow .9s ease-out}@keyframes rvGlow{0%,35%{filter:drop-shadow(0 0 16px rgb(var(--a)))}100%{filter:none}}
@media(max-width:600px){.review{padding:8px 10px 9px;gap:6px;max-height:44vh}.rv-tag{font-size:16px}.rv-badge{min-width:60px;font-size:12.5px;padding:7px 6px}.rv-body b{font-size:14.5px}.rv-body p{font-size:12.5px;line-height:1.5}.rv-nav button{font-size:12.5px;padding:9px 2px}.rv-evalrow small{min-width:92px;font-size:11.5px}.rv-exit{padding:6px 10px;font-size:13px}.rv-ic{width:32px}.rv-pos{font-size:12px}.rv-coach{padding:7px 9px;gap:9px}}

/* ===== wzfix ===== */
#wzDots::after{content:none!important;display:none!important;animation:none!important}
#newModal .sheet{display:flex;flex-direction:column}
#newModal .sheet>fieldset{min-width:0}
#newModal .sheet .acts{margin-top:auto;padding-top:10px}
.lv-txt small{min-height:3em}

/* ===== rvfix ===== */
.review{display:flex;flex-direction:column;overflow:hidden}
.review>*{flex:none}
.review>.rv-coach{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rv-body{min-height:5.4em}
.review.min .rv-body{min-height:0}
#rvBack{color:#0b1020;background:linear-gradient(180deg,var(--x3),var(--x5));border-color:var(--x2)}

/* ===== authcss ===== */
#authModal{z-index:90}
.authsheet{max-width:440px;text-align:center}
.authsheet .lead{font-size:14px;line-height:1.7;margin-bottom:16px}
.auth-x{position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;font-weight:900;color:var(--x2);background:rgba(var(--a),.1);border:1px solid rgba(var(--a),.45);cursor:pointer;transition:transform .2s,background .2s;z-index:2}
.auth-x:hover{background:rgba(var(--a),.25);transform:rotate(90deg)}
.auth-stack{display:grid;gap:10px}
.auth-stack .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;font-size:15.5px}
.auth-google{background:#fff!important;color:#1f2937!important;border-color:#fff!important}
.auth-google svg{fill:initial!important;stroke:none!important;width:20px!important;height:20px!important}
.auth-form{display:grid;gap:9px;text-align:start;margin-top:2px}
.auth-form[hidden]{display:none}
.auth-form input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;font:600 15px inherit;font-family:inherit;color:var(--ivory);background:rgba(4,8,22,.8);border:1px solid rgba(var(--a),.4);outline:none;direction:ltr;text-align:left}
.auth-form input:focus{border-color:var(--x3);box-shadow:0 0 0 3px rgba(var(--a),.2)}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-err{margin:0;min-height:1.3em;font-size:13px;font-weight:800;color:#ff9aa8;text-align:center}
.auth-err:empty{display:none}
.auth-link{background:none;border:0;color:var(--x3);font:700 13px inherit;font-family:inherit;cursor:pointer;text-decoration:underline;padding:2px;justify-self:center}
.auth-skip{margin-top:14px;background:none;border:0;color:var(--mist);font:700 14px inherit;font-family:inherit;cursor:pointer;padding:8px 14px;border-radius:10px}
.auth-skip:hover{color:var(--x2);background:rgba(var(--a),.08)}
.auth-note{margin:14px 0 0;font-size:12.5px;color:var(--mist);line-height:1.6}
.auth-av{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:900 30px var(--font-display);color:var(--x10);background:linear-gradient(180deg,var(--x3),var(--x6));border:2px solid var(--x2);box-shadow:0 0 24px rgba(var(--a),.4)}
.auth-av img{width:100%;height:100%;object-fit:cover}
.auth-mail{direction:ltr;color:var(--mist);font-size:13.5px;margin:2px 0 10px}
.auth-ai{display:inline-block;margin:6px 0 14px;padding:6px 14px;border-radius:99px;font-weight:800;font-size:13px;color:#7bf0b0;background:rgba(110,240,170,.1);border:1px solid rgba(110,240,170,.45)}
.hlogin{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px auto 0;padding:11px 22px;border-radius:99px;font-weight:800;font-size:15px;color:var(--x2);border-color:var(--x4)}
.hlogin svg{width:20px;height:20px}
.hlogin.on{border-color:rgba(110,240,170,.6);color:#bff7d8}
#btnAuth.on,#hAuth.on{border-color:var(--x3);box-shadow:0 0 16px rgba(var(--a),.55)}
#btnAuth.on::after{content:'';position:absolute;top:6px;left:6px;width:9px;height:9px;border-radius:50%;background:#2ecc71;box-shadow:0 0 8px #2ecc71}
#hAuth.on{border-color:var(--x3);box-shadow:0 0 16px rgba(var(--a),.55)}
#hAuth.on::after{content:'';position:absolute;top:6px;left:6px;width:9px;height:9px;border-radius:50%;background:#2ecc71;box-shadow:0 0 8px #2ecc71}
.profbtn{position:fixed;z-index:75;top:max(12px,env(safe-area-inset-top,0px));left:12px;width:48px;height:48px;padding:0;border-radius:50%;display:none;place-items:center;cursor:pointer;border:2px solid var(--x4);background:linear-gradient(180deg,rgba(24,42,92,.85),rgba(8,14,34,.95));color:var(--x2);box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 18px rgba(var(--a),.25);transition:transform .2s,box-shadow .25s}
#home:not([hidden]) ~ .profbtn{display:grid}
.profbtn:hover{transform:scale(1.07);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 26px rgba(var(--a),.5)}
.profbtn:active{transform:scale(.95)}
/* زرار البروفايل يظهر بس لو اللاعب مسجّل دخول (الكلاس .on بيتحط من renderProfile) */
.profbtn:not(.on),#btnAuth:not(.on){display:none!important}
.profbtn.on{border-color:var(--x3)}
.profbtn.on::after{content:'';position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#2ecc71;border:2px solid #04060f;box-shadow:0 0 8px #2ecc71}
.pb-av{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:900 20px var(--font-display);color:var(--x10)}
.profbtn.on .pb-av{background:linear-gradient(180deg,var(--x3),var(--x6))}
.pb-av img,.auth-av img{width:100%;height:100%;object-fit:cover;display:block}
.auth-avwrap{position:relative;width:76px;margin:6px auto 8px}
.auth-avwrap .auth-av{margin:0;padding:0;cursor:pointer;font-family:var(--font-display)}
.auth-cam{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-style:normal;background:var(--x5);border:2px solid #04060f;pointer-events:none}
.auth-in{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;font:600 15px inherit;font-family:inherit;color:var(--ivory);background:rgba(4,8,22,.8);border:1px solid rgba(var(--a),.4);outline:none;direction:ltr;text-align:left}
.auth-in:focus{border-color:var(--x3);box-shadow:0 0 0 3px rgba(var(--a),.2)}
.auth-in[hidden]{display:none}
.auth-namerow{display:grid;grid-template-columns:1fr auto;gap:8px;margin:6px 0 2px}
.auth-namerow .btn{min-height:46px}
#authAcct .auth-err,#authDel .auth-err{margin-top:8px}
#authAcct .auth-stack .btn.danger,#authDel .btn.danger{border-color:rgba(255,80,100,.7);color:#ffb3be}

/* ===== authlux ===== */
#authModal{background:radial-gradient(700px 520px at 50% 18%,rgba(var(--a),.2),transparent 65%),radial-gradient(520px 420px at 85% 105%,rgba(163,102,255,.18),transparent 62%),rgba(2,4,12,.97)}
.authsheet{max-width:460px;padding:34px 26px 24px;border:1.5px solid transparent;border-radius:28px;overflow:hidden;
 background:linear-gradient(165deg,rgba(22,36,84,.97),rgba(5,8,22,.99)) padding-box,linear-gradient(140deg,var(--x2),rgba(var(--a),.25) 38%,rgba(163,102,255,.7) 70%,var(--x4)) border-box;
 box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 70px rgba(var(--a),.2),inset 0 1px 0 rgba(var(--p),.25)}
.authsheet::before{content:'';position:absolute;inset:-40% -20% auto;height:70%;background:conic-gradient(from 170deg at 50% 0%,transparent 0 8%,rgba(var(--h),.14) 10%,transparent 14%,transparent 30%,rgba(var(--p),.1) 32%,transparent 36%);animation:luxSway 12s ease-in-out infinite alternate;pointer-events:none}
.authsheet::after{content:'';position:absolute;inset:8px;border-radius:21px;border:1px solid rgba(var(--a),.16);pointer-events:none}
@keyframes luxSway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.authsheet>div{position:relative;z-index:1}
.auth-x{z-index:3}
.auth-x[hidden]{display:none!important}
#gateConfirm{z-index:5500}
#gateConfirm .gc-ico{width:74px;height:74px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:radial-gradient(circle at 35% 30%,rgba(255,120,140,.28),rgba(120,20,44,.35));border:1px solid rgba(255,123,134,.55);box-shadow:0 0 28px rgba(255,90,110,.28)}
#gateConfirm .sheet{max-width:410px;text-align:center}
#gateConfirm h2{font-size:25px;margin:6px 0 4px}
#gateConfirm .lead{margin:6px 0 16px}
#gateConfirm .gc-btns{display:grid;gap:10px}
#gateConfirm .btn{width:100%}
.lux-emblem,.lux-mail{position:relative;width:128px;height:118px;margin:0 auto 6px;display:grid;place-items:center}
.lux-emblem svg{width:78px;height:72px;fill:none;stroke:url(#gStroke);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(var(--h),.8));animation:crestFloat 4.5s ease-in-out infinite}
.lux-emblem svg path,.lux-emblem svg circle,.lux-mail svg path:not(.seal),.lux-mail svg rect{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s .15s cubic-bezier(.5,0,.2,1) forwards}
.ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(var(--h),.55)}
.ring.r1{animation:spin 40s linear infinite}
.ring.r2{inset:12px;border-style:solid;border-color:rgba(var(--a),.28);animation:spin 28s linear infinite reverse}
.lux-eyebrow{margin:0;text-align:center;font:700 11px var(--font-latin);letter-spacing:.55em;padding-inline-start:.55em;color:var(--x3);direction:ltr}
.authsheet h2{margin:4px 0 0;font-size:36px;background:linear-gradient(180deg,#fff,var(--x3) 60%,var(--x6));-webkit-background-clip:text;background-clip:text;color:transparent}
.authsheet .lead{margin:6px 0 4px;color:var(--mist);font-size:14.5px;font-weight:600}
.lux-orn{display:flex;align-items:center;gap:12px;margin:10px auto 18px;width:min(100%,280px)}
.lux-orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--x4))}.lux-orn i:last-child{transform:scaleX(-1)}
.lux-orn b{color:var(--x3);font-size:18px;text-shadow:0 0 14px rgba(var(--h),.9)}
.authsheet .auth-stack .btn{border-radius:15px;min-height:52px;font-size:16px;font-weight:800}
.auth-google{box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 26px rgba(255,255,255,.18)!important}
.lux-or{display:flex;align-items:center;gap:12px;color:var(--mist);font-weight:800;font-size:13px}
.lux-or::before,.lux-or::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--a),.45),transparent)}
.auth-form{padding:14px;border-radius:18px;background:rgba(0,0,0,.28);border:1px solid rgba(var(--a),.22)}
.auth-form input{border-radius:13px;padding:14px;background:rgba(3,6,18,.9)}
.auth-skip{display:block;margin:12px auto 0;color:var(--mist);font-size:14px}
.lux-mail svg{width:82px;height:72px;fill:none;stroke:url(#gStroke);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(var(--h),.85));animation:mailBob 3.2s ease-in-out infinite}
.lux-mail .seal{fill:var(--x3);stroke:none}
@keyframes mailBob{50%{transform:translateY(-7px) rotate(-3deg)}}
.lux-mail .spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--x2);box-shadow:0 0 10px 2px rgba(var(--h),.9);animation:twinkle 2.6s ease-in-out infinite}
.lux-mail .s1{left:6px;top:20px}.lux-mail .s2{right:4px;top:34px;animation-delay:.8s}.lux-mail .s3{left:30px;bottom:2px;animation-delay:1.5s}
.authsheet .lux-h{font-size:32px}
.lux-chip{display:inline-block;max-width:100%;margin:2px auto 14px;padding:9px 18px;border-radius:99px;direction:ltr;font:700 14.5px var(--font-latin);color:var(--x1);background:linear-gradient(180deg,rgba(var(--a),.2),rgba(var(--a),.07));border:1px solid rgba(var(--h),.6);box-shadow:0 0 22px rgba(var(--a),.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#authVerify,#authLC{text-align:center}
#authLC .auth-err{margin-top:4px}
.lux-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;text-align:start}
.lux-steps li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:9px 12px;border-radius:14px;background:rgba(var(--a),.07);border:1px solid rgba(var(--a),.22);animation:rise .6s both}
.lux-steps li:nth-child(2){animation-delay:.12s}.lux-steps li:nth-child(3){animation-delay:.24s}
.lux-steps b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:900 15px var(--font-display);color:var(--x10);background:linear-gradient(180deg,var(--x3),var(--x6));box-shadow:0 0 14px rgba(var(--a),.5)}
.lux-steps span{font-weight:700;font-size:14px;color:var(--ivory)}
.lux-go{animation:hbig 2.4s ease-in-out infinite}
.lux-live{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:12.5px;font-weight:700;color:var(--mist)}
.lux-live i{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 10px #2ecc71;animation:breathe 1.6s ease-in-out infinite}
@media(max-width:600px){.authsheet{padding:26px 16px 20px;border-radius:24px 24px 0 0}.authsheet h2{font-size:30px}.lux-emblem,.lux-mail{width:108px;height:100px}}
@media(prefers-reduced-motion:reduce){.authsheet::before,.ring,.lux-go{animation:none}}

/* ===== authlux2 ===== */
.auth-pane:not([hidden]){animation:paneIn .5s cubic-bezier(.2,.9,.2,1) both}
@keyframes paneIn{from{opacity:0;transform:translateX(-26px)}}
.auth-form{display:grid;gap:10px}
.auth-form .btn{width:100%}
.auth-switch{margin:16px 0 0;text-align:center;font-weight:700;font-size:14.5px;color:var(--mist)}
.auth-link2{background:none;border:0;padding:2px 4px;margin-inline-start:4px;font:900 15px inherit;font-family:inherit;cursor:pointer;color:var(--x2);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(var(--h),.5);transition:color .2s,text-shadow .2s}
.auth-link2:hover{color:#fff;text-shadow:0 0 14px rgba(var(--h),.9)}
.pw-str{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:6px;align-items:center;margin:-2px 2px 0}
.pw-str i{height:5px;border-radius:9px;background:rgba(255,255,255,.1);transition:background .3s,box-shadow .3s}
.pw-str small{min-width:56px;text-align:end;font-size:12px;font-weight:800;color:var(--mist)}
.pw-str[data-s="1"] i:nth-child(-n+1){background:#ff5a6e;box-shadow:0 0 8px #ff5a6e}
.pw-str[data-s="2"] i:nth-child(-n+2){background:#ffb03d;box-shadow:0 0 8px #ffb03d}
.pw-str[data-s="3"] i:nth-child(-n+3){background:#9be15d;box-shadow:0 0 8px #9be15d}
.pw-str[data-s="4"] i:nth-child(-n+4){background:var(--x3);box-shadow:0 0 10px rgba(var(--h),.9)}

/* ===== mobilepro ===== */
@media (max-width:760px){
 :root{--gut:4px;--fr:13px}
 html,body{overscroll-behavior:none}
 body{-webkit-text-size-adjust:100%}
 .app{padding-inline:var(--gut);padding-block:6px max(14px,env(safe-area-inset-bottom,0px))}
 /* هيدر مضغوط: صف أزرار واحد */
 .brand{display:none}
 .top{min-height:0;padding:2px 2px 8px;flex-wrap:nowrap;justify-content:space-between;gap:8px}
 .top-actions{width:100%;justify-content:space-between;gap:6px}
 .top-actions .icon-btn{flex:1 1 0;width:auto;min-height:42px;border-radius:13px}
 .top-actions .btn.gold{flex:2.2 1 0;min-height:42px;font-size:15px;border-radius:13px}
 /* الرقعة كبيرة وواضحة */
 .stage{--bs:calc(100vw - 2 * var(--gut) - 2 * var(--fr));gap:7px}
 .frame{padding:var(--fr);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 30px rgba(var(--a),.16),inset 0 2px 0 rgba(var(--p),.6)}
 .frame::before{inset:4px;border-radius:10px}
 .coord{font-size:8.5px;opacity:.8}
 .board{border-radius:2px}
 .board::after{background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.2) 100%)}
 .piece svg{width:116%;height:116%;margin:-6% 0 0 -8%}
 .pw{stroke-width:1.7}.pb{stroke-width:2}
 .sq.tg::after{left:30%;top:30%;width:40%;height:40%}
 .sq.last::before{box-shadow:inset 0 0 0 2px rgba(var(--h),.6)}
 .banner b{font-size:clamp(40px,14vw,64px)}
 /* بطاقات اللاعبين مضغوطة */
 .card{padding:8px 10px;border-radius:14px}
 .card::before{display:none}
 .player{grid-template-columns:auto 1fr auto;gap:10px;padding:8px 10px}
 .player .clock{grid-column:auto;justify-self:auto;min-width:68px;padding:4px 8px;font-size:19px;border-radius:9px}
 .avatar{width:40px;height:40px;border-width:1.5px}.avatar svg{width:30px;height:30px}
 .pname{font-size:17px;line-height:1.15}.psub{font-size:11.5px;line-height:1.3}
 .caps{min-height:18px;margin-top:2px}.caps svg{width:19px;height:19px;margin-inline:-4px}
 .say.show{font-size:12.5px;padding:3px 8px;margin-top:4px;max-height:70px}
 .player.active{transform:none}
 /* التحكم */
 .controls{grid-template-columns:1fr auto;align-items:center;gap:10px}
 #status{font-size:19px}#substatus{font-size:11.5px}
 .pulse{width:11px;height:11px}
 .btnrow{display:block!important}
 .btnrow .btn{min-height:40px;padding:6px 14px;font-size:14px}
 /* سجل الحركات صغير */
 .moves{padding:8px 10px}
 .moves h2{font-size:16px;margin:0 0 4px}
 #moves{max-height:86px;font-size:15px}
 .empty-note{padding:6px 2px;font-size:12.5px}
 /* تحسينات الأداء: بدون طبقات ثقيلة */
 .beams,#ambient,.home-rays,.home-aurora,.home-halo,.home-floor{display:none!important}
 .frame::after{display:none}
 .player.active .avatar{animation:none}
 /* الصفحة الرئيسية */
 .home{padding:16px 12px 26px}
 .home-title{font-size:clamp(46px,16vw,70px)}
 .home-menu{gap:12px}
 .hbtn{border-radius:20px}
 .home-stats{padding:4px}
 .toast{bottom:max(18px,env(safe-area-inset-bottom,0px));max-width:92vw;text-align:center}
 /* المراجعة: الرقعة كبيرة برضه */
 body.reviewing[data-rvdock="bottom"] .stage,body.reviewing[data-rvdock="top"] .stage{--bs:min(calc(100vw - 2 * var(--gut) - 2 * var(--fr)),var(--rvfit))}
}
@media (max-width:760px) and (hover:none){
 .btn:active,.hbtn:active{transform:scale(.96)}
 .board.canpick{cursor:auto}
}
/* لمسة سينمائية خفيفة على الموبايل (تعتمد على transform/opacity فقط) */
@media (max-width:760px){
 .player.active{border-color:rgba(var(--h),.8);box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 1px rgba(var(--h),.4),0 0 22px rgba(var(--a),.28)}
 .frame{animation:frameBreath 5s ease-in-out infinite}
 @keyframes frameBreath{50%{box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 46px rgba(var(--a),.32),inset 0 2px 0 rgba(var(--p),.6)}}
 .boot .frame{animation:frameIn 1s cubic-bezier(.2,.8,.2,1) both}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.frame{animation:none}}

/* ===== onlinenew ===== */
.online-wrap{position:relative;display:block;width:100%;padding-top:12px;animation:rise .9s .98s both}
.online-wrap::before{content:'';position:absolute;left:4%;right:4%;top:24px;bottom:-8px;border-radius:30px;background:radial-gradient(60% 100% at 50% 50%,rgba(var(--a),.6),transparent 72%);filter:blur(20px);opacity:.55;pointer-events:none;animation:olGlow 3.6s ease-in-out infinite}
@keyframes olGlow{50%{opacity:1}}
.soon{position:absolute;z-index:4;top:0;left:50%;transform:translateX(-50%);padding:5px 24px;border-radius:99px;white-space:nowrap;font:900 13px var(--font-display);letter-spacing:.22em;color:var(--x10);background:linear-gradient(180deg,#fff,var(--x3) 48%,var(--x5));border:1px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.55),0 0 0 3px rgba(var(--a),.22),0 0 28px rgba(var(--a),.9);overflow:hidden;animation:soonP 2.4s ease-in-out infinite}
.soon::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);transform:translateX(-140%);animation:btnSweep 2.8s .8s ease-in-out infinite}
@keyframes soonP{50%{transform:translateX(-50%) translateY(-2px) scale(1.06)}}
.hbtn.online{display:grid;width:100%;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 22px 20px;cursor:pointer;animation:none;color:var(--x2);
 background:radial-gradient(520px 150px at 50% -25%,rgba(var(--a),.4),transparent 70%) padding-box,radial-gradient(320px 170px at 0% 130%,rgba(163,102,255,.3),transparent 70%) padding-box,linear-gradient(160deg,rgba(28,50,112,.97),rgba(4,8,24,.99)) padding-box,linear-gradient(135deg,var(--x2),rgba(var(--a),.28) 40%,var(--x5)) border-box;
 box-shadow:0 22px 52px rgba(0,0,0,.6),0 0 46px rgba(var(--a),.4),inset 0 1px 0 rgba(var(--p),.4),inset 0 -18px 36px rgba(var(--a),.08)}
.hbtn.online::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;z-index:3;background:conic-gradient(from var(--ang),transparent 0 55%,var(--x3) 76%,#fff 86%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:angS 3s linear infinite}
.o-aura{position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;margin:-70% 0 0 -70%;pointer-events:none;opacity:.5;mix-blend-mode:screen;background:conic-gradient(from 0deg,transparent 0 14%,rgba(var(--a),.34) 18%,transparent 24%,transparent 52%,rgba(var(--h),.28) 57%,transparent 63%,transparent 100%);animation:spin 14s linear infinite}
.o-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.o-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--x1);box-shadow:0 0 8px 1px rgba(var(--h),.95);opacity:0;animation:twinkle 3.2s ease-in-out infinite}
.o-stars i:nth-child(1){left:8%;top:24%}.o-stars i:nth-child(2){left:24%;top:78%;animation-delay:.5s}.o-stars i:nth-child(3){left:42%;top:18%;animation-delay:1.1s}.o-stars i:nth-child(4){left:60%;top:82%;animation-delay:1.7s}.o-stars i:nth-child(5){left:74%;top:28%;animation-delay:.3s}.o-stars i:nth-child(6){left:90%;top:72%;animation-delay:2.2s}.o-stars i:nth-child(7){left:50%;top:52%;animation-delay:2.6s}
.o-c{position:absolute;width:15px;height:15px;border:2px solid var(--x3);pointer-events:none;z-index:3;opacity:.8;filter:drop-shadow(0 0 5px rgba(var(--h),.9))}
.o-c.c1{top:10px;right:12px;border-width:2px 2px 0 0;border-radius:0 9px 0 0}.o-c.c2{top:10px;left:12px;border-width:2px 0 0 2px;border-radius:9px 0 0 0}
.o-c.c3{bottom:10px;right:12px;border-width:0 2px 2px 0;border-radius:0 0 9px 0}.o-c.c4{bottom:10px;left:12px;border-width:0 0 2px 2px;border-radius:0 0 0 9px}
.hbtn.online .hic{position:relative;z-index:2;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(var(--a),.4),rgba(0,0,0,.5));border:1.5px solid rgba(var(--h),.8);color:var(--x2);box-shadow:0 0 30px rgba(var(--a),.6),inset 0 0 20px rgba(var(--a),.3)}
.hbtn.online .hic svg{position:relative;width:44px;height:44px;filter:drop-shadow(0 0 8px rgba(var(--h),.95))}
.hbtn.online .orb{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}
.o-orbit{position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(var(--h),.55);animation:spin 7s linear infinite;pointer-events:none}
.o-orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(var(--h),1)}
.o-txt{position:relative;z-index:2;display:block;text-align:start}
.hbtn.online b{font-size:31px;line-height:1.2;background:linear-gradient(100deg,var(--x4),#fff 30%,var(--x3) 50%,#fff 70%,var(--x4));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite;filter:drop-shadow(0 0 14px rgba(var(--a),.7))}
.hbtn.online small{font-size:14px;margin-top:2px;opacity:.95}
.hbtn.online .go{position:relative;z-index:2;font-style:normal;font-size:30px;line-height:1;opacity:1;color:var(--x2);text-shadow:0 0 14px rgba(var(--h),.95)}
.hbtn.online:hover{transform:translateY(-6px) scale(1.025);box-shadow:0 28px 62px rgba(0,0,0,.65),0 0 80px rgba(var(--a),.65)}
@media(max-width:760px){.hbtn.online{padding:20px 14px 16px;gap:14px}.hbtn.online .hic{width:58px;height:58px}.hbtn.online .hic svg{width:38px;height:38px}.hbtn.online b{font-size:26px}.hbtn.online small{font-size:12.5px}.hbtn.online .go{font-size:24px}.o-c{width:12px;height:12px}}
@media(prefers-reduced-motion:reduce){.soon,.soon::after,.online-wrap::before,.hbtn.online::after,.o-aura,.o-orbit,.hbtn.online .orb,.hbtn.online b,.o-stars i{animation:none}}
.lowfx .o-aura,.lowfx .online-wrap::before{display:none}

/* ===== onlinetweak ===== */
.hbtn.online .hic{margin-inline-start:10px}.o-orbit{inset:-5px}.hbtn.online{padding-inline:20px}@media(max-width:760px){.hbtn.online .hic{margin-inline-start:8px}.hbtn.online{padding-inline:12px}}

/* ===== hoverlux ===== */
@media (hover:hover) and (pointer:fine){
 .hbtn{transition:transform .45s cubic-bezier(.2,1.2,.3,1),box-shadow .35s,border-color .3s;will-change:transform}
 .hbtn:hover,.hbtn.online:hover{transform:perspective(800px) translateY(-6px) scale(1.03) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s linear,box-shadow .35s,border-color .3s}
 .hglow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s;background:radial-gradient(240px circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.26),rgba(var(--a),.2) 38%,transparent 72%)}
 .hbtn:hover .hglow{opacity:1}
 .hbtn:hover::before{animation:btnSweepFast .9s cubic-bezier(.4,0,.2,1) both}
 @keyframes btnSweepFast{from{transform:translateX(-140%)}to{transform:translateX(140%)}}
 .hbtn .hic{transition:transform .5s cubic-bezier(.2,1.6,.35,1),box-shadow .4s,border-color .3s}
 .hbtn:hover .hic{transform:rotate(-9deg) scale(1.14);box-shadow:0 0 30px rgba(var(--a),.7),inset 0 0 18px rgba(var(--p),.3);border-color:rgba(var(--h),.9)}
 .hbtn:hover .hic svg{animation:icoWig .7s cubic-bezier(.3,1.6,.4,1)}
 @keyframes icoWig{0%{transform:scale(.8) rotate(12deg)}55%{transform:scale(1.18) rotate(-8deg)}100%{transform:none}}
 .hbtn b{transition:letter-spacing .4s cubic-bezier(.2,.9,.2,1),text-shadow .4s,transform .4s}
 .hbtn:hover b{letter-spacing:.025em;transform:translateX(-4px)}
 .hbtn:not(.online):not(.bot):hover b{text-shadow:0 0 18px rgba(var(--h),.75)}
 .hbtn small{transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.2,1)}
 .hbtn:hover small{transform:translateX(-4px)}
 .hbtn .go{transition:transform .4s cubic-bezier(.2,1.4,.4,1),opacity .3s,text-shadow .3s}
 .hbtn:hover .go{transform:translateX(-12px) scale(1.2);opacity:1;text-shadow:0 0 14px rgba(var(--h),.95)}
 .hbtn.online:hover .go{transform:translateX(-12px) scale(1.2)}
 /* كل الأزرار: لمعة تعدّي + رفعة */
 .btn::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-130%)}
 .btn:hover:not(:disabled)::before{transform:translateX(130%);transition:transform .75s cubic-bezier(.4,0,.2,1)}
 .btn svg{transition:transform .4s cubic-bezier(.2,1.6,.35,1)}
 .btn:hover:not(:disabled) svg{transform:scale(1.18) rotate(-7deg)}
 .btn:hover:not(:disabled){transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px rgba(var(--a),.32),0 0 0 1px rgba(var(--h),.35)}
 .seg label:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgba(var(--a),.25)}
 .tchip:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 12px 26px rgba(var(--a),.35)}
 .pbtn:hover{animation:none}
 .hf:hover,.rv-nav button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px rgba(var(--a),.28)}
 .hi-head:hover{background:rgba(var(--a),.06)}
}
.btn .rpl,.hbtn .rpl{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(var(--a),.25) 50%,transparent 70%);transform:scale(0);animation:rplA .65s cubic-bezier(.2,.7,.3,1) both;z-index:2}
@keyframes rplA{to{transform:scale(1);opacity:0}}

/* ===== mobperf ===== */
/* ===== وضع الموبايل الخفيف: بيقفل الحركات والتأثيرات التقيلة، واللابتوب زي ما هو ===== */
@media (max-width:900px),(pointer:coarse){
  *,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;mix-blend-mode:normal!important}
  .beams,.floaters,#ambient,.home-aurora,.home-stars,.o-stars,.o-aura,.o-orbit,.crest-ring,.fl,.lux-mail .spark,.pl-pieces{display:none!important}
  #preload::before,.authsheet::before,.hbtn::before,.hbtn.bot::after,.hbtn.online::after,.online-wrap::before,.soon::after,.frame::after,.pl-bar i::after,.hcue i::after{animation:none!important;display:none!important}
  .home-crest,.pl-crest,.pl-ring,.home-title span,.pl-title,.hbtn.online b,.hbtn.online .orb,.ring.r1,.ring.r2,.lux-go,.frame,.player.active .avatar,.pulse,.credit .lion,.hs-empty span,.lvl.max .lv-ico,.lux-live i,.sq.sel::before,.sq.hint::before{animation:none!important}
  .home-crest,.pl-crest,.lux-emblem svg,.lux-mail svg,.hbtn.online .hic svg{filter:none!important}
  .hbtn,.hbtn.online,.piece{will-change:auto!important}
  .fic,.hbig,.home-rays,.home-halo,.rv-coach.loading .rv-badge,.lux-emblem .ring,.lux-go{animation:none!important}
  .home-rays,.home-halo,.authsheet::before{display:none!important}
  *,*::before,*::after{text-shadow:none!important;filter:none!important}
  .overlay{background:rgba(3,2,8,.94)!important}
  #olCP,#frP{box-shadow:none!important}
  .home-floor,.home-frame{display:none!important}
  .hbtn,.hbtn.online,.btn,.card,.sheet,.panel,.hbig{box-shadow:0 6px 14px rgba(0,0,0,.4)!important;text-shadow:none!important}
  .hbtn:hover,.hbtn.online:hover,.btn:hover{transform:none!important}
  .home-title span,.hbtn.online b{background-size:100% 100%!important}
  .overlay:not([hidden]),.overlay:not([hidden]) .sheet,.step:not([hidden]){animation-duration:.15s!important}
  .toast,#olTop>*{box-shadow:none!important}
}

/* تأكيد الانسحاب من مباراة أونلاين — فوق كل عناصر الأونلاين */
#quitConfirm { z-index: 6000; }
#quitConfirm .qc-ico { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; color: #ff7b86; background: radial-gradient(circle, rgba(229,72,77,.3), rgba(229,72,77,.05)); border: 2px solid rgba(255,123,134,.55); }
#quitConfirm .qc-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }


/* ===== نظام الرانك: 30 طبقة ===== */
@keyframes rkSpin{to{transform:rotate(360deg)}}
@keyframes rkRev{to{transform:rotate(-360deg)}}
@keyframes rkPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes rkHue{to{filter:hue-rotate(360deg)}}
@keyframes rkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes rkIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.rkw{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:50%;--c1:#c68642;--c2:#8b5a2b}
.rkw>.avatar,.rkw>.auth-av,.rkw>.pv{position:relative;z-index:2}
.rkf{position:absolute;inset:calc(-4px - var(--k,0) * .6px);border-radius:50%;pointer-events:none;z-index:1;
  box-shadow:0 0 calc(3px + var(--k,0) * 2px + var(--sg,0) * 3px) var(--c1)}
.rkf[data-s="0"]{--sg:0}.rkf[data-s="1"]{--sg:1}.rkf[data-s="2"]{--sg:2}.rkf[data-s="3"]{--sg:3}.rkf[data-s="4"]{--sg:4}.rkf[data-s="5"]{--sg:6}
.rkf b,.rkf u,.rkf i{position:absolute;display:none;pointer-events:none}
.rkf .r1,.rkf .r2,.rkf .r3,.rkf .h{display:block;border-radius:50%;inset:0}
.rkf .r1{background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c1),var(--c2),var(--c1));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px - var(--k,0) * .5px),#000 calc(100% - 2px - var(--k,0) * .5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px - var(--k,0) * .5px),#000 calc(100% - 2px - var(--k,0) * .5px))}
.rkf[data-s="1"] .r1,.rkf[data-s="2"] .r1,.rkf[data-s="3"] .r1,.rkf[data-s="4"] .r1,.rkf[data-s="5"] .r1{animation:rkSpin calc(7s - var(--sg) * .8s) linear infinite}
.rkf[data-s="2"],.rkf[data-s="3"],.rkf[data-s="4"],.rkf[data-s="5"]{animation:rkPulse 2.4s ease-in-out infinite}
.rkf .r2{display:none;inset:-5px;background:conic-gradient(from 90deg,transparent,var(--c2),transparent 45%,var(--c1),transparent 80%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:rkRev 5s linear infinite}
.rkf[data-s="2"] .r2,.rkf[data-s="3"] .r2,.rkf[data-s="4"] .r2,.rkf[data-s="5"] .r2{display:block}
.rkf .r3{display:none;inset:-9px;animation:rkSpin 6s linear infinite;
  background:radial-gradient(circle at 50% 0,#fff 0 2px,var(--c1) 3px,transparent 4.5px),radial-gradient(circle at 50% 100%,#fff 0 2px,var(--c2) 3px,transparent 4.5px),radial-gradient(circle at 0 50%,var(--c1) 0 2px,transparent 3.5px),radial-gradient(circle at 100% 50%,var(--c2) 0 2px,transparent 3.5px)}
.rkf[data-s="3"] .r3,.rkf[data-s="4"] .r3,.rkf[data-s="5"] .r3{display:block}
.rkf .h{display:none;inset:-11px;filter:blur(7px);opacity:.85;animation:rkSpin 3s linear infinite;z-index:-1;
  background:conic-gradient(from 0deg,transparent,var(--c1),transparent 30%,var(--c2),transparent 65%,var(--c1),transparent)}
.rkf[data-s="4"] .h,.rkf[data-s="5"] .h{display:block}
.rkf .cr,.rkf .wl,.rkf .wr{display:none}
.rkf[data-s="5"] .cr{display:block;left:50%;top:-17px;width:22px;height:14px;margin-left:-11px;animation:rkFloat 2s ease-in-out infinite;
  background:linear-gradient(180deg,var(--c1),var(--c2));filter:drop-shadow(0 0 4px var(--c1));
  clip-path:polygon(0 100%,0 25%,25% 55%,50% 0,75% 55%,100% 25%,100% 100%)}
.rkf[data-s="5"] .wl,.rkf[data-s="5"] .wr{display:block;top:28%;width:20px;height:26px;background:linear-gradient(90deg,var(--c1),transparent);opacity:.9;filter:drop-shadow(0 0 4px var(--c2));animation:rkPulse 2.2s ease-in-out infinite}
.rkf[data-s="5"] .wl{left:-17px;clip-path:polygon(100% 0,0 35%,35% 55%,10% 100%,100% 80%)}
.rkf[data-s="5"] .wr{right:-17px;transform:scaleX(-1);clip-path:polygon(100% 0,0 35%,35% 55%,10% 100%,100% 80%)}
.rkf[data-t="29"] .r1,.rkf[data-t="29"] .h{animation:rkSpin 4s linear infinite,rkHue 5s linear infinite}
.rkf[data-t="26"] .r1{filter:drop-shadow(0 0 3px #ff4081)}
@media (prefers-reduced-motion:reduce){.rkf,.rkf *{animation:none!important}}

.rkb{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font:800 14px var(--font-display,inherit);color:#111;
  background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 10px var(--c1)}
#home:not([hidden]) ~ 
#rkProf{margin:8px 0 4px}
.rkpf{padding:10px;border-radius:14px;background:rgba(255,255,255,.05);text-align:center}
.rkpf .tp{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:8px}
.rkpf .tp strong{font:900 22px var(--font-display,inherit)}
.rkbar{height:8px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin:6px 0}
.rkbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--c2),var(--c1));transition:width .8s}
.rkpf small{display:block;opacity:.8;line-height:1.7}
.rkpf .btn{margin-top:8px}

.rksheet{max-width:560px;width:100%;max-height:92vh;overflow:auto}
.rkhead{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px}
.rkhead .rkw{margin:12px 0 8px}
.rkhead .pv,.rkt .pv{border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#242a52,#10132b);color:#fff}
.rkhead .pv{width:84px;height:84px;font-size:40px}
.rkhow{font-size:13px;line-height:1.9;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);margin:8px 0}
.rkg{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 10px;margin-top:12px}
.rkt{position:relative;padding:14px 4px 8px;border-radius:12px;background:rgba(255,255,255,.05);text-align:center;cursor:pointer;border:1px solid transparent;font-size:12px}
.rkt .pv{width:38px;height:38px;font-size:18px}
.rkt b{display:block;margin-top:9px;font-size:13px}
.rkt small{opacity:.7;display:block}
.rkt.lk{filter:grayscale(.8) brightness(.62)}
.rkt.sel{border-color:#ffd54f;background:rgba(255,213,79,.1)}
.rkt.me:after{content:"أنت هنا";position:absolute;top:-1px;right:-1px;padding:1px 7px;border-radius:0 12px 0 9px;background:#ffd54f;color:#111;font:800 10px var(--font-display,inherit)}

#rkCard{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9998;width:min(92vw,360px);padding:14px;border-radius:16px;
  background:rgba(10,12,34,.96);border:1px solid rgba(255,213,79,.5);box-shadow:0 12px 40px rgba(0,0,0,.6);color:#fff;animation:rkIn .4s ease}
#rkCard h4{margin:0 0 8px;font:800 16px var(--font-display,inherit);text-align:center}
#rkCard .row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
#rkCard .row b.p{color:#6dffa0}#rkCard .row b.n{color:#ff7b7b}
#rkCard .tot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font:900 22px var(--font-display,inherit)}
#rkCard .up{margin-top:8px;text-align:center;font-weight:800;color:#ffd54f}
#rkCard .x{position:absolute;top:6px;left:10px;background:none;border:0;color:#fff;font-size:16px;cursor:pointer}
#rkCard .pb{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:8px}
#rkCard .pb i{display:block;height:100%;width:0;background:#ffd54f;transition:width .3s}

#rkFx{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.rkpt{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity}
.rkbolt{position:absolute;inset:0;width:100%;height:100%}

/* ===== كارت الرانك في البروفايل (بيفخّم كل ما الطبقة تعلى) ===== */
@keyframes rkShine{to{background-position:200% 0}}
@keyframes rkRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-120px) scale(1);opacity:0}}
@keyframes rkGem{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.07)}}
@keyframes rkWing{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
.rkcard{--sg:0;position:relative;overflow:hidden;border-radius:20px;text-align:center;isolation:isolate;margin:6px 0;box-shadow:0 0 calc(6px + var(--sg) * 7px) color-mix(in srgb,var(--c1) 55%,transparent)}
.rkcard[data-s="1"]{--sg:1}.rkcard[data-s="2"]{--sg:2}.rkcard[data-s="3"]{--sg:3}.rkcard[data-s="4"]{--sg:4}.rkcard[data-s="5"]{--sg:6}
.rkcard::before{content:"";position:absolute;inset:-60%;z-index:-3;background:conic-gradient(var(--c1),var(--c2),var(--c1),var(--c2),var(--c1))}
.rkcard:not([data-s="0"])::before{animation:rkSpin calc(9s - var(--sg) * 1s) linear infinite}
.rkcard::after{content:"";position:absolute;inset:2px;border-radius:18px;z-index:-2;background:linear-gradient(180deg,#141838,#0a0c22)}
.rkaura{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 18%,var(--c1),transparent 62%);opacity:calc(.12 + var(--sg) * .06)}
.rkcard:not([data-s="0"]) .rkaura{animation:rkPulse 3s ease-in-out infinite}
.rkpts{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.rkpts i{position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--c1);box-shadow:0 0 6px var(--c1);opacity:0;display:none;animation:rkRise 3s linear infinite}
.rkcard[data-s="1"] .rkpts i:nth-child(-n+2),.rkcard[data-s="2"] .rkpts i:nth-child(-n+4),.rkcard[data-s="3"] .rkpts i:nth-child(-n+6),.rkcard[data-s="4"] .rkpts i:nth-child(-n+8),.rkcard[data-s="5"] .rkpts i{display:block}
.rkin{position:relative;padding:20px 14px 14px}
.rkemb{position:relative;width:92px;height:92px;margin:0 auto 10px}
.rkgem{position:absolute;inset:16px;transform:rotate(45deg);border-radius:calc(8px + var(--sg) * 2px);display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 0 calc(8px + var(--sg) * 5px) var(--c1)}
.rkcard:not([data-s="0"]) .rkgem{animation:rkGem 2.8s ease-in-out infinite}
.rkgem em{font:900 22px var(--font-display,inherit);font-style:normal;color:#111;transform:rotate(-45deg);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.rkemb::before{content:"";position:absolute;inset:2px;border-radius:50%;display:none;background:conic-gradient(from 0deg,transparent,var(--c1),transparent 40%,var(--c2),transparent 80%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:rkSpin 4s linear infinite}
.rkcard[data-s="2"] .rkemb::before,.rkcard[data-s="3"] .rkemb::before,.rkcard[data-s="4"] .rkemb::before,.rkcard[data-s="5"] .rkemb::before{display:block}
.rkemb .wg,.rkemb .cw{display:none;position:absolute}
.rkcard[data-s="4"] .rkemb .wg,.rkcard[data-s="5"] .rkemb .wg{display:block;top:22px;width:34px;height:44px;background:linear-gradient(90deg,var(--c1),transparent);filter:drop-shadow(0 0 5px var(--c2));animation:rkWing 2.4s ease-in-out infinite;clip-path:polygon(100% 0,0 30%,40% 52%,8% 100%,100% 78%)}
.rkemb .wl{left:-30px}.rkemb .wr{right:-30px;transform:scaleX(-1)}
.rkcard[data-s="5"] .rkemb .cw{display:block;left:50%;top:-6px;width:36px;height:22px;margin-left:-18px;background:linear-gradient(180deg,#fff7c2,#ffc928);clip-path:polygon(0 100%,0 25%,25% 55%,50% 0,75% 55%,100% 25%,100% 100%);filter:drop-shadow(0 0 6px #ffc928);animation:rkFloat 2s ease-in-out infinite}
.rkname{font:900 clamp(28px,8vw,36px)/1.2 var(--font-display,inherit);background:linear-gradient(90deg,var(--c2),#fff,var(--c1),#fff,var(--c2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 calc(var(--sg) * 3px) var(--c1))}
.rkcard:not([data-s="0"]) .rkname{animation:rkShine calc(5s - var(--sg) * .4s) linear infinite}
.rkcard[data-t="29"] .rkgem,.rkcard[data-t="29"] .rkemb::before{animation:rkHue 4s linear infinite}
.rkrp{margin-top:2px;font:700 14px var(--font-display,inherit);opacity:.9;direction:ltr}
.rkrp b{font-size:22px}
.rkbar2{height:10px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin:12px 6px 8px;position:relative}
.rkbar2 i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--c2),var(--c1));transition:width .8s;position:relative;overflow:hidden}
.rkbar2 i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65),transparent 70%);transform:translateX(-100%);animation:rkBarShine 2.4s ease-in-out infinite}
@keyframes rkBarShine{to{transform:translateX(100%)}}
.rknext{font-size:13px;opacity:.9;line-height:1.7}
.rkmeta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;font-size:12px;opacity:.75;margin:4px 0 2px}
.rkcard .btn{margin-top:10px}
@media (prefers-reduced-motion:reduce){.rkcard,.rkcard *,.rkcard::before{animation:none!important}}

/* ===== شاشة الرانكات (سلّم مرتّب من الأول للآخر) ===== */
.rksheet{padding-bottom:18px}
.rkh2{font:900 28px var(--font-display,inherit);text-align:center;margin:4px 0 0;background:linear-gradient(90deg,#ffd54f,#fff,#ffd54f);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:rkShine 5s linear infinite}
.rksub{text-align:center;font-size:12px;opacity:.7;margin:2px 0 10px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.rkpv{margin:0 4px}
.rkpv.lockd .rkgem,.rkpv.lockd .rkname{filter:saturate(.55) brightness(.85)}
.rkpv .rkin{padding-top:24px}
.rkstat{display:inline-block;margin-top:10px;padding:5px 16px;border-radius:99px;font:800 13px var(--font-display,inherit)}
.rkstat.ok{background:rgba(80,220,140,.16);color:#7dffb2;border:1px solid rgba(80,220,140,.5)}
.rkstat.no{background:rgba(255,213,79,.12);color:#ffd54f;border:1px solid rgba(255,213,79,.45)}
.rknav{display:flex;gap:8px;margin:10px 4px 0}
.rknav .btn{flex:1;padding:9px 6px;font-size:13px}
.rknav .btn:disabled{opacity:.35;cursor:default}
.rklist{margin-top:8px;padding:0 2px;display:flex;flex-direction:column}
.rklg{display:flex;align-items:center;gap:10px;margin:18px 4px 8px}
.rklg b{font:900 15px var(--font-display,inherit);background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 6px var(--c1))}
.rklg i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c1),transparent)}
.rklg small{font-size:11px;opacity:.6}
.rkrow{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;margin:6px 4px;border-radius:14px;cursor:pointer;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);animation:rkIn .45s ease both;animation-delay:var(--d,0s);transition:transform .15s,border-color .2s}
.rkrow::before{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 0 12px var(--c1)}
.rkrow:hover{transform:translateX(-3px)}
.rkrow .no{width:22px;text-align:center;font:800 12px var(--font-display,inherit);opacity:.5}
.rkrow .rkmini{position:relative;flex:none;width:42px;height:42px;display:grid;place-items:center}
.rkrow .rkmini::before{content:"";position:absolute;inset:6px;transform:rotate(45deg);border-radius:9px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 0 calc(4px + var(--g,0) * 3px) var(--c1)}
.rkrow[data-s="1"]{--g:1}.rkrow[data-s="2"]{--g:2}.rkrow[data-s="3"]{--g:3}.rkrow[data-s="4"]{--g:4}.rkrow[data-s="5"]{--g:6}
.rkrow .rkmini em{position:relative;font:900 13px var(--font-display,inherit);font-style:normal;color:#111}
.rkrow .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rkrow .nm b{font:900 16px var(--font-display,inherit)}
.rkrow .nm small{font-size:12px;opacity:.65}
.rkrow .st{flex:none;font:800 12px var(--font-display,inherit);padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.08)}
.rkrow.done .st{color:#7dffb2;background:rgba(80,220,140,.14)}
.rkrow.lk{opacity:.62;filter:saturate(.6)}
.rkrow.lk:hover{opacity:.9;filter:none}
.rkrow.me{border-color:var(--c1);background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 22%,transparent),rgba(255,255,255,.03));box-shadow:0 0 18px color-mix(in srgb,var(--c1) 55%,transparent)}
.rkrow.me .st{background:#ffd54f;color:#111}
.rkrow.me .mini::before{animation:rkGem 2.8s ease-in-out infinite}
.rkrow.sel{outline:2px solid #ffd54f;outline-offset:-2px}
.rkbar2.sm{height:6px;margin:4px 0 0}
@media (prefers-reduced-motion:reduce){.rkh2,.rkrow,.rkrow .rkmini::before{animation:none!important}}