/* ===========================================================
   Urealm — هوية العالم.

   `state/look.js` يكتب `--w-*` على كل مشهد: الأرض، والحبر، والحدّ،
   والصورة. وهذه القواعد **تستهلك تلك الرموز ولا تخترع لونًا** —
   فالهوية بيد صاحب العالم لا بيد ورقة الأنماط.

   ▸ ولا طبقة محيطة: لا سماء ولا حبيبة. النقاء هو الأثر، والحبيبة
     ضريبةٌ على كل إطارٍ يُرسم.
   =========================================================== */

.world {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--w-line, var(--line));
  border-radius: var(--r-lg);
  background: var(--w-bg, var(--bg-surface));
  color: var(--w-ink, var(--fg));
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}

.world:hover { transform: translateY(-2px); text-decoration: none; }

.world__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.world__image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

.world__scene { position: absolute; inset: 0; background: var(--w-scene, var(--bg-deep)); }

/* الصبغة والحجاب طبقتان يكتب شدّتهما `look.js`. */
.world__tint { position: absolute; inset: 0; background: var(--w-tint, transparent); opacity: var(--w-tint-alpha, 0); }
.world__veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--w-veil, transparent), transparent 60%); }

.world__cipher {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--w-semi);
  line-height: 1;
  color: color-mix(in srgb, var(--w-ink, var(--fg)) 12%, transparent);
  user-select: none;
}

.world__art { position: absolute; inset: 0; display: grid; place-items: center; }

.world__mark {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--w-line, var(--line));
  border-radius: var(--r-md);
  background: var(--w-bg, var(--bg-surface-2));
  color: var(--w-ink, var(--fg));
}

.world__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); min-inline-size: 0; }
.world__name { font-size: var(--t-sm); font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world__desc { font-size: var(--t-xs); color: var(--w-dim, var(--fg-mute)); line-height: var(--lh-snug); }
.world__meta { display: flex; align-items: center; gap: var(--sp-2); }
.world__foot,
.world__hint { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--w-dim, var(--fg-faint)); }

.world__flags { display: flex; gap: var(--sp-1); }
.world__flag { display: grid; place-items: center; color: var(--w-dim, var(--fg-mute)); }

/* ----------------------- الأشكال ----------------------- */

.world--tile { aspect-ratio: 1; }
.world--row { flex-direction: row; align-items: center; gap: var(--sp-3); padding: var(--sp-2); }
.world--row .world__media { inline-size: 52px; aspect-ratio: 1; border-radius: var(--r-md); flex: none; }
.world--row .world__body { padding: 0; flex: 1; }

.world--banner .world__media { aspect-ratio: 21 / 9; }
.world--orb .world__media { aspect-ratio: 1; border-radius: var(--r-full); }
.world--gate .world__media { aspect-ratio: 3 / 4; }
.world--phone .world__media { aspect-ratio: 9 / 16; }

/* ----------------------- الرقاقة ----------------------- */

.world-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-2);
  border: 1px solid var(--w-line, var(--line));
  border-radius: var(--r-full);
  background: var(--w-bg, var(--bg-surface-2));
  color: var(--w-ink, var(--fg-soft));
  font-size: var(--t-xs);
}

.world-chip__dot { inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: currentColor; }
.world-chip__glyph { line-height: 1; }
.world-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------- الطبقة المحيطة ----------------------- */

/* أُسقطت عمدًا: سماءٌ متحرّكة وحبيبةٌ فوق كل شيء تكلّفان إطارًا في كل
   رسمة ولا تضيفان معنًى. الرموز باقية لأنّ `look.js` يكتبها. */
.ambient,
.ambient__sky,
.ambient__grain { display: none; }

.welcome-art { display: grid; place-items: center; min-block-size: 200px; color: var(--fg-faint); }