:root { color-scheme:dark; font-family:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif; --bg:#080b14; --panel:#14192a; --text:#f7f7fc; --muted:#8d96aa; --accent:#7963f3; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 90% -10%,rgba(119,93,247,.22),transparent 38%),var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent; user-select:none; }
button { font:inherit; }
.game-page { width:min(100%,520px); min-height:100vh; margin:auto; padding:max(17px,env(safe-area-inset-top)) 17px max(24px,env(safe-area-inset-bottom)); }
.cloud-brand { direction:ltr; display:flex; width:max-content; align-items:center; gap:6px; margin:0 auto 13px; border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); border-radius:999px; padding:5px 11px; background:color-mix(in srgb,var(--accent) 9%,rgba(10,13,23,.86)); color:#e9ebf5; font-size:8px; font-weight:1000; letter-spacing:1.7px; box-shadow:0 0 22px color-mix(in srgb,var(--accent) 12%,transparent); }
.cloud-brand .dancing-313 { display:inline-flex; direction:ltr; gap:1px; color:var(--accent); letter-spacing:0; text-shadow:0 0 12px var(--accent); perspective:40px; }
.cloud-brand .dancing-313 i { display:inline-block; font-style:normal; transform-origin:center; }
.cloud-brand .dancing-313 i:nth-child(1) { animation:spinFirst 1.8s ease-in-out infinite; }
.cloud-brand .dancing-313 i:nth-child(2) { animation:flipMiddle 1.45s ease-in-out infinite; }
.cloud-brand .dancing-313 i:nth-child(3) { animation:walkLast 1.6s ease-in-out infinite; }
.game-brand-line { direction:ltr; display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto 13px; }
.game-brand-line .cloud-brand { margin:0; }
.baron-game-credit { display:flex; align-items:center; align-self:stretch; gap:4px; border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:4px 9px; background:rgba(255,255,255,.035); color:#777f92; font-size:6px; font-weight:900; letter-spacing:.65px; white-space:nowrap; }
.dancing-baron { display:inline-flex; direction:ltr; gap:.5px; color:#d9c6ff; font-size:8px; letter-spacing:0; text-shadow:0 0 10px var(--accent); perspective:55px; }
.dancing-baron i { display:inline-block; font-style:normal; transform-origin:center bottom; animation:baronDance 1.5s ease-in-out infinite; }
.dancing-baron i:nth-child(2) { animation-delay:.1s; }.dancing-baron i:nth-child(3) { animation-delay:.2s; }.dancing-baron i:nth-child(4) { animation-delay:.3s; }.dancing-baron i:nth-child(5) { animation-delay:.4s; }
@keyframes baronDance { 0%,45%,100%{transform:translateY(0) rotateY(0);color:#d9c6ff} 18%{transform:translateY(-3px) rotateY(180deg);color:#fff} 30%{transform:translateY(1px) rotateY(360deg);color:var(--accent)} }
.memory-card::after { content:"313"!important; color:var(--accent)!important; }
@keyframes spinFirst { 0%,18%,100%{transform:rotate(0)}70%{transform:rotate(360deg)} }
@keyframes flipMiddle { 0%,15%,100%{transform:rotateX(0)}62%{transform:rotateX(360deg)} }
@keyframes walkLast { 0%,18%,100%{transform:translateX(0) rotate(0)}38%{transform:translateX(3px) rotate(10deg)}58%{transform:translateX(7px) rotate(-8deg)}78%{transform:translateX(3px) rotate(7deg)} }
@media (prefers-reduced-motion:reduce) { .dancing-313,.dancing-baron i { animation:none; } }
.game-header { display:flex; align-items:center; justify-content:space-between; }
.back,.sound { display:grid; place-items:center; width:41px; height:41px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(20,25,42,.86); color:#dcd9f5; cursor:pointer; }
.game-title { text-align:center; }.game-title h1 { margin:0; font-size:16px; }.game-title p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.score-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:25px 0 18px; }
.score-box { border:1px solid rgba(255,255,255,.07); border-radius:15px; padding:11px 7px; background:rgba(20,25,42,.75); text-align:center; }
.score-box span { display:block; margin-bottom:4px; color:var(--muted); font-size:8px; }.score-box strong { font-size:16px; }
.game-panel { border:1px solid rgba(255,255,255,.08); border-radius:25px; padding:15px; background:rgba(18,23,39,.88); box-shadow:0 22px 60px rgba(0,0,0,.26); }
.status { min-height:24px; margin:14px 0; text-align:center; color:#b6aecf; font-size:12px; }
.primary { width:100%; border:0; border-radius:15px; padding:14px; background:linear-gradient(135deg,#826cff,#5c45d4); color:white; font-weight:800; cursor:pointer; box-shadow:0 11px 28px rgba(95,72,214,.28); }
.hint { margin:17px 0 0; color:#697287; text-align:center; font-size:9px; line-height:1.7; }
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:22px; background:rgba(4,6,12,.78); backdrop-filter:blur(10px); }
.modal[hidden] { display:none; }.modal-card { width:min(100%,340px); border:1px solid rgba(255,255,255,.1); border-radius:25px; padding:28px 22px; background:#171c2d; text-align:center; box-shadow:0 30px 90px #000; }.modal-card .trophy { font-size:45px; }.modal-card h2 { margin:11px 0 5px; }.modal-card p { margin:0 0 18px; color:var(--muted); font-size:11px; }