/* RDIA game — identity: the logo's rounded blocks on a staircase grid. Solid brand field, no glow gradients. */
@font-face{font-family:"Favorit";src:url(/fonts/ABCFavoritArabic-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Favorit";src:url(/fonts/ABCFavoritArabic-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Favorit";src:url(/fonts/ABCFavoritArabic-Bold.otf) format("opentype");font-weight:700;font-display:swap}
:root{
  --field:#3900B0; --field-2:#4A17C9; --field-3:#2C008C; --ink:#1A1A2E; --paper:#F7F8FA; --paper-2:#E8E8EC; --mute-ink:#5C6274;
  --lime:#D4E700; --cyan:#4FD7ED; --orange:#F67205; --lilac:#967DFF; --green:#00CD7A;
  --on-field:#FFFFFF; --on-field-mute:rgba(255,255,255,.72);
  --r-block:22%; --r-tile:clamp(14px,1.4vw,28px); --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-pop:cubic-bezier(.3,1.4,.5,1);
  --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='6' y='6' width='52' height='52' rx='12' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:"Favorit","IBM Plex Sans Arabic",system-ui,sans-serif;direction:rtl;-webkit-font-smoothing:antialiased}
body{background:var(--field) var(--grid);background-size:64px 64px;color:var(--on-field);transition:background-color .6s var(--ease),color .6s var(--ease)}
body.paper{background:var(--paper);color:var(--ink)}
body.lime{background-color:#BFD000;color:var(--ink)}
button{font:inherit;color:inherit;border:0;cursor:pointer;direction:rtl;background:none}
input,textarea{font:inherit;direction:rtl}
.num{font-variant-numeric:normal}
.tab{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
/* block glyphs (the logo's squares) */
.glyph{display:inline-grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:12%;width:1em;height:1em;flex:none}
.glyph i{background:currentColor;border-radius:var(--r-block)}
/* decorative staircase of blocks */
.stair{position:fixed;pointer-events:none;display:grid;grid-template-columns:repeat(3,var(--s));grid-template-rows:repeat(3,var(--s));gap:calc(var(--s)*.12)}
.stair i{border-radius:var(--r-block);background:var(--c,var(--field-2))}
@keyframes drop{from{transform:translateY(-40px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes float{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-60vh) rotate(25deg);opacity:0}}
@keyframes blink{50%{opacity:.35}}
.in-drop{animation:drop .6s var(--ease) both}.in-rise{animation:rise .6s var(--ease) both}.in-pop{animation:pop .5s var(--ease-pop) both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}