/* Shared "world" design system for the Tajweed section — chunky 3D buttons,
   textured scroll cards, ringed icon badges. Used across tajweed/* and games/{qalqalah,noon}/*. */

.tj-icon-sprite { display: none; }

/* ---------- 3D game buttons (Duolingo-style press) ---------- */
.tj-btn-3d {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: var(--r-tile); padding: 14px 26px;
    font-family: 'Cairo', 'Cairo', sans-serif; font-weight: 800; font-size: 1rem;
    color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap;
    background: var(--btn-face, #0E6B5C);
    box-shadow: 0 5px 0 var(--btn-edge, #0A3D35), 0 8px 18px rgba(10,61,53,.2);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.tj-btn-3d:hover { filter: brightness(1.05); color: #fff; text-decoration: none; }
.tj-btn-3d:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge, #0A3D35), 0 3px 8px rgba(7, 43, 37, .18); }
.tj-btn-3d:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.tj-btn-3d.block { width: 100%; }

.tj-btn-3d.c-teal   { --btn-face: linear-gradient(180deg,#178474,#0E6B5C); --btn-edge: #0A3D35; }
.tj-btn-3d.c-blue    { --btn-face: linear-gradient(180deg,var(--c-teal-500),var(--c-teal-700)); --btn-edge: var(--c-teal-900); }
.tj-btn-3d.c-orange  { --btn-face: linear-gradient(180deg,var(--c-orange),var(--c-orange-edge)); --btn-edge: var(--c-orange-ink); }
.tj-btn-3d.c-purple  { --btn-face: linear-gradient(180deg,var(--c-teal-500),#0E6B5C); --btn-edge: #0A3D35; }
.tj-btn-3d.c-red     { --btn-face: linear-gradient(180deg,var(--c-wrong),var(--c-wrong)); --btn-edge: var(--c-wrong); }
.tj-btn-3d.c-grey    { --btn-face: linear-gradient(180deg,var(--c-line),var(--c-ink-faint)); --btn-edge: var(--c-ink-muted); }

/* ---------- Selectable "difficulty" tiles as flat-pressed toggle chips ---------- */
.tj-toggle-tile {
    border: none; border-radius: var(--r-tile); padding: 14px 10px; text-align: center; cursor: pointer;
    background: #fff; box-shadow: 0 4px 0 var(--c-cream), 0 6px 14px rgba(10,61,53,.08);
    transition: transform .08s, box-shadow .08s, background .15s;
}
.tj-toggle-tile:hover { transform: translateY(-2px); }
.tj-toggle-tile.active {
    background: linear-gradient(180deg,#178474,#0E6B5C); color: #fff;
    box-shadow: 0 4px 0 #0A3D35, 0 6px 14px rgba(10,61,53,.24);
}
.tj-toggle-tile.active .tj-toggle-sub { color: rgba(255,255,255,.85); }
.tj-toggle-row { display: flex; gap: 12px; justify-content: center; }
.tj-toggle-row .tj-toggle-tile { flex: 1; max-width: 180px; width: auto; }
.tj-toggle-icon { font-size: 1.6rem; margin-bottom: 4px; }
.tj-toggle-name { font-weight: 800; font-family: 'Cairo','Cairo',sans-serif; margin-bottom: 2px; }
.tj-toggle-sub { font-size: .78rem; color: var(--c-ink-muted); }

/* ---------- Card, matching the site's white-card family ---------- */
.tj-scroll-card {
    position: relative; background: #fff;
    border-radius: var(--r-tile);
    box-shadow: 0 0 0 2px var(--c-cream) inset, 0 10px 26px rgba(10,61,53,.1);
    padding: 26px 22px 20px;
}
.tj-scroll-tag {
    position: absolute; top: -14px; right: 50%; transform: translateX(50%);
    background: linear-gradient(180deg,#178474,#0E6B5C); color: #fff;
    font-family: 'Cairo','Cairo',sans-serif; font-weight: 800; font-size: .78rem;
    padding: 5px 18px; border-radius: 50px; box-shadow: 0 3px 0 #1B332E, 0 4px 10px rgba(0,0,0,.15);
    white-space: nowrap;
}

/* ---------- Ringed icon badge (sticker feel) ---------- */
.tj-badge {
    position: relative; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ring, #0E6B5C), 0 8px 16px rgba(10,61,53,.16);
}
.tj-badge svg { width: 55%; height: 55%; }
.tj-badge.sm { width: 44px; height: 44px; }
.tj-badge.md { width: 58px; height: 58px; }
.tj-badge.lg { width: 84px; height: 84px; }

/* ---------- Ground shadow beneath floating cards/badges ---------- */
.tj-ground-shadow { position: relative; }
.tj-ground-shadow::after {
    content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
    width: 60%; height: 14px; background: radial-gradient(ellipse, rgba(27, 51, 46, .22), transparent 70%);
    border-radius: 50%;
}